[javascript] jQuery로 div의 가시 높이 가져 오기

Program / 글쓴이

스크롤 가능한 영역 내에서 div의 보이는 높이를 검색해야합니다. 나는 jQuery에 대해 꽤 괜찮다고 생각하지만 이것은 나를 완전히 버리고 있습니다.

검은 색 래퍼 안에 빨간색 div가 있다고 가정 해 보겠습니다.

위의 그래픽에서 jQuery 함수는 div의 보이는 부분 인 248을 반환합니다.

위의 그래픽에서와 같이 사용자가 div의 맨 위로 스크롤하면 296이보고됩니다.

이제 사용자가 div를지나 스크롤하면 다시 248을보고합니다.

분명히 내 수치는이 데모 에서처럼 일관되고 명확하지 않을 것입니다. 아니면 그 수치에 대해 하드 코딩 할 것입니다.

나는 약간의 이론이 있습니다.

  • 창 높이 가져 오기
  • div의 높이 가져 오기
  • 창 상단에서 div의 초기 오프셋 가져 오기
  • 사용자가 스크롤 할 때 오프셋을 가져옵니다.
    • 오프셋이 양수이면 div의 상단이 여전히 표시됨을 의미합니다.
    • 음수이면 div의 상단이 창에 가려진 것입니다. 이 시점에서 div는 창의 전체 높이를 차지하거나 div의 하단에 표시 될 수 있습니다.
    • div의 하단이 표시되면 창 하단과의 간격을 파악합니다.

매우 간단 해 보이지만 머리를 감쌀 수는 없습니다. 나는 내일 아침에 또 다른 균열을 가질 것입니다. 천재 여러분 중 일부가 도움을 줄 수 있다고 생각했습니다.

감사!

업데이트 : 나는 이것을 스스로 알아 냈지만 아래 답변 중 하나가 더 우아해 보이기 때문에 대신 사용할 것입니다. 궁금한 사람을 위해 여기에 내가 생각해 낸 것이 있습니다.

$(document).ready(function() {
    var windowHeight = $(window).height();
    var overviewHeight = $("#overview").height();
    var overviewStaticTop = $("#overview").offset().top;
    var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
    var overviewStaticBottom = overviewStaticTop + $("#overview").height();
    var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
    var visibleArea;
    if ((overviewHeight + overviewScrollTop) < windowHeight) {
        // alert("bottom is showing!");
        visibleArea = windowHeight - overviewScrollBottom;
        // alert(visibleArea);
    } else {
        if (overviewScrollTop < 0) {
            // alert("is full height");
            visibleArea = windowHeight;
            // alert(visibleArea);
        } else {
            // alert("top is showing");
            visibleArea = windowHeight - overviewScrollTop;
            // alert(visibleArea);
        }
    }
});

답변

여기에 빠르고 더러운 개념이 있습니다. 기본적으로 offset().top요소의를 창의 상단과 창의 offset().top + height()하단과 비교합니다.

function getVisible() {
    var $el = $('#foo'),
        scrollTop = $(this).scrollTop(),
        scrollBot = scrollTop + $(this).height(),
        elTop = $el.offset().top,
        elBottom = elTop + $el.outerHeight(),
        visibleTop = elTop < scrollTop ? scrollTop : elTop,
        visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    $('#notification').text(visibleBottom - visibleTop);
}

$(window).on('scroll resize', getVisible);

바이올린 예

edit- 창의 크기를 조정할 때 로직을 수행하기위한 작은 업데이트입니다.

답변

요소 (높이)가 뷰포트에있는 픽셀의 양을 계산합니다.

바이올린 데모

이 작은 함수 는 px(수직) 뷰포트에 보이는 요소 의 양을 반환합니다 .

function inViewport($el) {
    var elH = $el.outerHeight(),
        H   = $(window).height(),
        r   = $el[0].getBoundingClientRect(), t=r.top, b=r.bottom;
    return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}

다음과 같이 사용하십시오.

$(window).on("scroll resize", function(){
  console.log( inViewport($('#elementID')) ); // n px in viewport
});

그게 다야.

jQuery .inViewport()플러그인

jsFiddle 데모

위에서 로직을 추출 하고 다음과 같은 플러그인을 만들 수 있습니다 .

/**
 * inViewport jQuery plugin by Roko C.B.
 * http://stackoverflow.com/a/26831113/383904
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));

다음과 같이 사용하십시오.

$("selector").inViewport(function(px) {
  console.log( px ); // `px` represents the amount of visible height
  if(px > 0) {
    // do this if element enters the viewport // px > 0
  }else{
    // do that if element exits  the viewport // px = 0
  }
}); // Here you can chain other jQuery methods to your selector

당신의 선택기는 동적으로 창을들을 것입니다 scroll및 resize뿐만 아니라 DOM 준비 트로프의 첫 번째 콜백 함수 인수를 초기 값을 반환합니다 px.

답변

다음은 jQuery 플러그인으로 작동하도록 작성된 것을 제외하고 위의 Rory 접근 방식의 버전입니다. 해당 형식에서보다 일반적인 적용 가능성이있을 수 있습니다. 좋은 대답, Rory-감사합니다!

$.fn.visibleHeight = function() {
    var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
    scrollTop = $(window).scrollTop();
    scrollBot = scrollTop + $(window).height();
    elTop = this.offset().top;
    elBottom = elTop + this.outerHeight();
    visibleTop = elTop < scrollTop ? scrollTop : elTop;
    visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
    return visibleBottom - visibleTop
}

다음과 같이 호출 할 수 있습니다.

$("#myDiv").visibleHeight();

jsFiddle

답변