如何使用jquery检查元素是否在用户的视图中

Question

我的窗口中有一个很大的可拖动div。此div 的窗口较小。

<div id="draggable-area" style="width:500px;height:500px;overflow:hidden">
 <div id="draggable" style="width:5000px;height:5000px">
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         ....
     </ul>
  </div>
</div>  

我如何知道li 元素是否在用户视口中可见（我的意思是真正可见，而不是在溢出区域中）？

Answer 1

检查一个元素是否在当前视口中：

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

(Source)

对于更强大的方法，我推荐Viewport Selectors，它允许您这样做：

$("#elem:in-viewport")

Answer 2

看看this plugin

您可以选择执行以下选择器

$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")

Answer 3

https://github.com/sakabako/scrollMonitor

var scrollMonitor = require("./scrollMonitor"); // if you're not using require, you can use the scrollMonitor global.
var myElement = document.getElementById("itemToWatch");

var elementWatcher = scrollMonitor.create( myElement );

elementWatcher.enterViewport(function() {
    console.log( 'I have entered the viewport' );
});
elementWatcher.exitViewport(function() {
    console.log( 'I have left the viewport' );
});

elementWatcher.isInViewport - true if any part of the element is visible, false if not.
elementWatcher.isFullyInViewport - true if the entire element is visible [1].
elementWatcher.isAboveViewport - true if any part of the element is above the viewport.
elementWatcher.isBelowViewport - true if any part of the element is below the viewport.

Answer 4

获取使用 getBoundingClientRect() 的更新方法：

var isInViewport = function (elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

如果元素完全在视口中，则返回 true，否则返回 false。

var myElem = document.querySelector('#draggable');
if (isInViewport(myElem)) {
    // Do something...
}

找到了完整的解释here。

Answer 5

我的解决方案是使用给定的代码示例，它将向您展示如何确定 li 元素是否可见的总体思路。查看包含您问题代码的jsFiddle。

jQuery .offset() 方法允许我们检索元素相对于文档的当前位置。如果单击可拖动对象内的 li 元素，则与顶部的偏移量将在 0 到 500 之间，而从左侧的偏移量应在 0 到 500 之间。如果调用当前不可见项的偏移量函数，从顶部或左侧偏移量的偏移量将小于 0 或大于 500。

如果这不是一项艰巨的任务，我总是喜欢从“scrath”编写我需要的代码，它在必须修改或调试时为我提供了更大的灵活性，因此我建议研究使用 jQuery 的偏移函数而不是使用插件。如果您要完成的工作相当简单，那么使用您自己的函数将减少一个要加载的库。

Answer 6

我正在使用（检查元素是否至少部分在视图中）以下代码：

var winSize;

function getWindowSize() {
            var winW,WinH = 0;
            if (document.body && document.body.offsetWidth) {
                winW = document.body.offsetWidth;
                winH = document.body.offsetHeight;
            }
            if (document.compatMode == 'CSS1Compat' &&
                document.documentElement &&
                document.documentElement.offsetWidth) {
                winW = document.documentElement.offsetWidth;
                winH = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight) {
                winW = window.innerWidth;
                winH = window.innerHeight;
            }
            return {w:winW, h:winH};
        }

winSize = getWindowSize();    

function inView(element) {
                var box = element.getBoundingClientRect();
                if ((box.bottom < 0) || (box.top > winSize.h)){
                    return false;
                }
                return true;
            }