Nhận chiều cao hiển thị của div với jQuery

Tôi cần truy xuất chiều cao hiển thị của một div trong một vùng có thể cuộn. Tôi tự cho mình là khá tốt với jQuery, nhưng điều này hoàn toàn khiến tôi thất vọng.

Giả sử tôi có một div màu đỏ trong một lớp bọc màu đen:

Trong hình trên, hàm jQuery sẽ trả về 248, phần hiển thị của div.

Khi người dùng cuộn qua đầu div, như trong hình trên, nó sẽ báo cáo 296.

Bây giờ, khi người dùng đã cuộn qua div, nó sẽ báo cáo lại 248.

Rõ ràng là các con số của tôi sẽ không nhất quán và rõ ràng như trong bản demo này, hoặc tôi chỉ viết mã cứng cho những con số đó.

Tôi có một chút lý thuyết:

• Nhận chiều cao của cửa sổ
• Lấy chiều cao của div
• Nhận phần bù ban đầu của div từ đầu cửa sổ
• Nhận phần bù khi người dùng cuộn.
  • Nếu độ lệch là dương, có nghĩa là đỉnh của div vẫn còn hiển thị.
  • nếu nó âm, phần trên của div đã bị cửa sổ che khuất. Tại thời điểm này, div có thể chiếm toàn bộ chiều cao của cửa sổ hoặc phần dưới cùng của div có thể hiển thị
  • Nếu đáy của div đang hiển thị, hãy tìm ra khoảng cách giữa nó và đáy của cửa sổ.

Nó có vẻ khá đơn giản, nhưng tôi không thể quấn lấy nó. Tôi sẽ lấy một vết nứt khác vào sáng mai; Tôi chỉ nghĩ rằng một số thiên tài trong số các bạn có thể giúp đỡ.

Cảm ơn!

CẬP NHẬT: Tôi đã tự mình tìm ra điều này, nhưng có vẻ như một trong những câu trả lời dưới đây thanh lịch hơn, vì vậy tôi sẽ sử dụng câu trả lời đó thay thế. Đối với những người tò mò, đây là những gì tôi nghĩ ra:

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

Đây là một khái niệm nhanh chóng và bẩn thỉu. Về cơ bản, nó so sánh offset().topphần tử với phần trên cùng của cửa sổ và offset().top + height()phần dưới với phần cuối của cửa sổ:

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

Ví dụ fiddle

chỉnh sửa - cập nhật nhỏ để cũng thực hiện logic khi cửa sổ được thay đổi kích thước.

Tính số lượng px mà một phần tử (chiều cao) có trong khung nhìn

Bản demo Fiddle

Đây nhỏ chức năng sẽ trở lại với số lượng pxmột yếu tố có thể nhìn thấy trong (theo chiều dọc) 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));
}

Sử dụng như:

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

đó là nó.

jQuery .inViewport()Plugin

jsFiddle demo

từ phần trên, bạn có thể trích xuất logic và tạo một plugin như sau:

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

Sử dụng như:

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

các bộ chọn của bạn sẽ tự động lắng nghe cửa sổ scrollvà resizeđồng thời trả về giá trị ban đầu trên DOM sẵn sàng vượt qua đối số hàm gọi lại đầu tiên px.

Đây là phiên bản của cách tiếp cận của Rory ở trên, ngoại trừ được viết để hoạt động như một plugin jQuery. Nó có thể có khả năng áp dụng chung hơn ở định dạng đó. Câu trả lời tuyệt vời, Rory - cảm ơn!

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

Có thể được gọi như sau:

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

jsFiddle