我需要检索可滚动区域内 div 的可见高度。我认为自己对 jQuery 相当满意，但这完全让我失望了。

假设我有一个黑色包装内的红色 div:

在上图中，jQuery 函数将返回 248，即 div 的可见部分。

一旦用户滚动到 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);
        }
    }
});

最佳答案

计算元素(高度)在视口(viewport)中的像素数

Fiddle demo

这个微型函数 将返回元素在(垂直)视口(viewport) 中可见的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 demo

从上面你可以提取逻辑并创建一个像这样的插件:

/**
 * 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 但也会通过第一个回调函数参数 px 返回 DOM 准备好的初始值.

关于javascript - 使用jQuery获取div的可见高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24768795/