jQuery로 디브의 눈에 보이는 높이를 가져옵니다.

jQuery로 디브의 눈에 보이는 높이를 가져옵니다.

스크롤 가능한 영역 내에서 디브의 가시 높이를 검색해야 합니다.저는 제가 jQuery에게 꽤 괜찮은 사람이라고 생각하지만, 이것은 저를 완전히 짜증나게 합니다.

검은 포장지 안에 빨간 디브가 있다고 치자.

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

위의 그림과 같이 div의 맨 위를 스크롤하면 296이 보고됩니다.

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

분명히 제 번호는 이 데모처럼 일관되고 명확하지 않을 것입니다. 그렇지 않으면 그 번호들을 하드 코드화할 것입니다.

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

• 창의 높이를 가져옵니다.
• 디브의 키를 잡습니다.
• 창 위쪽에서 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);
        }
    }
});

뷰포트에 있는 요소(높이)의 px 양 계산

피들 데모

이 작은 함수는 양을 되돌려 줄 것입니다.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첫 인수를 합니다.한째백수를해서다기을첫다을서t기ee해mnmothnelk한 .px.

여기 빠르고 더러운 개념이 있습니다.로해다를다를 합니다.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(`Visible height of div: ${visibleBottom - visibleTop}px`);
}

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

html,
body {
  margin: 100px 0;
}

#foo {
  height: 1000px;
  background-color: #C00;
  width: 200px;
  margin: 0 auto;
}

#notification {
  position: fixed;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="foo"></div>
<div id="notification"></div>

필요하다면 논리를 좀 더 간결하게 만들 수 있습니다. 저는 계산을 가능한 한 명확하게 하기 위해 이 예제에 대해 별도의 변수를 선언했을 뿐입니다.

다음은 jQuery 플러그인으로 기능하기 위해 작성된 것을 제외한 위의 로리 접근 방식의 버전입니다.해당 형식에서 보다 일반적인 적용 가능성을 가질 수 있습니다.좋은 대답이야, 로리 - 고마워요!

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

jquery function에 대한 개선된 코드는 다음과 같습니다.높이: $("#myDiv").보이는높이();

$.fn.visibleHeight = function() {
    var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop, height;
    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;
    height = visibleBottom - visibleTop;
    return height > 0 ? height : 0;
}

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