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

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

jQuery .offset（）方法允许我们检索元素相对于文档的当前位置。如果单击draggable中的li元素，则从顶部开始的偏移量将介于0和500之间，左边的偏移量应介于0和500之间。如果调用当前不可见的项目的偏移函数，偏移量将从顶部或左侧偏移量小于0或大于500。

如果它不是一项令人生畏的任务，我总是喜欢用'scrath'来编写我需要的东西，它在修改或调试时给了我更大的灵活性，因此我建议使用jQuery的偏移函数而不是使用插件。如果您要完成的任务非常简单，那么使用您自己的函数将减少一个库的加载。

Answer 5

我在代码之后使用（检查元素是否至少部分位于视图中）：

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

Answer 6

使用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。

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

6 个答案: