jQuery로 div의 가시 높이 가져 오기

jQuery로 div의 가시 높이 가져 오기

---

스크롤 가능한 영역 내에서 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);
        }
    }
});

---

Here is a quick and dirty concept. It basically compares the offset().top of the element to the top of the window, and the offset().top + height() to the bottom of the window:

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);

Example fiddle

edit - small update to also perform the logic when the window is being resized.

---

Calculate the amount of px an element (height) is in viewport

Fiddle demo

This tiny function will return the amount of px an element is visible in the (vertical) Viewport:

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));
}

Use like:

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

that's it.

---

jQuery .inViewport() Plugin

jsFiddle demo

from the above you can extract the logic and create a plugin like this one:

/**
 * 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));

Use like:

$("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

your selectors will dynamically listen to window scroll and resize but also return the initial value on DOM ready trough the first callback function argument px.

---

Here is a version of Rory's approach above, except written to function as a jQuery plugin. It may have more general applicability in that format. Great answer, Rory - thanks!

$.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
}

Can be called with the following:

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

jsFiddle

참고URL : https://stackoverflow.com/questions/24768795/get-the-visible-height-of-a-div-with-jquery