Question

假设我的div高度很大，因为里面有很大的内容。当我向下滚动时，假设我的浏览器中可以看到该div的30％。这可能是30％或40％的任何东西。现在我想检测该div的可见区域的高度和宽度。

我有这个代码，但不确定它是否符合我的要求？

  var height = $("#example").height();

  // Get the topScroll position
  var scrollTop = $("#example").scrollTop();

  // Get the difference (content shown)
  var shown = height - scrollTop;

  // Display the shown amount
  $("#shown").html(shown);

Demo

帮我提出建议或更好的方法。感谢

Answer 1

要检测可见（视口内）高度，您可以创建一个简单的插件，如：

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

你可以像使用它一样：

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

<强> jsFiddle demo

您可以轻松扩展上述插件以返回可见宽度，如：

function inViewport($el) {
    var H = $(window).height(),
        W = $(window).width(),
        bcr = $el[0].getBoundingClientRect(), t=bcr.top,  b=bcr.bottom,
                                              l=bcr.left, r=bcr.right; 
    return {
        visibleHeight : Math.max(0, t>0? H-t : (b<H?b:H)),
        visibleWidth  : Math.max(0, l>0? W-l : (l<W?l:W))
   };
}

你可以使用（因为它返回一个Object），如：

var $el = $("#elementID");

$(window).on("scroll resize", function() {
  var amountOf = inViewport( $el );
  console.log(
      amountOf.visibleHeight,
      amountOf.visibleWidth
  );
});

如何通过JQuery检测div的视口区域

1 个答案: