Javascript 如何使用jquery检查元素是否在用户的视图中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8229291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check if an element is in the view of the user with jquery
提问by Sebastien
I have a very big draggable divin my window. This divhas a smaller window.
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>
How can I know if the lielement is visible in the user viewport (I mean really visible, not in the overflow area)?
我怎么知道li元素在用户视口中是否可见（我的意思是真的可见，而不是在溢出区域）？
回答by Alex Peattie
To check if an element is in the current veiwport:
要检查元素是否在当前视口中：
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)
（来源）
For a more robust method, I'd recommend Viewport Selectors, which allow you to just do:
对于更强大的方法，我建议使用Viewport Selectors，它允许您执行以下操作：
$("#elem:in-viewport")
回答by Manuel van Rijn
have a look at this plugin
看看这个插件
It give's you the option to do the following selectors
它为您提供了执行以下选择器的选项
$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")
回答by trushkevich
https://github.com/sakabako/scrollMonitor
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.
回答by Lumic
I m using (checks whether an element is at least partially in the view) following code:
我正在使用（检查一个元素是否至少部分在视图中）以下代码：
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;
}
回答by Maze
For a more up-to-date way using getBoundingClientRect():
有关使用 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)
);
};
Returns true if the element in completely in the viewport, and false if it's not.
如果元素完全在视口中，则返回 true，否则返回 false。
var myElem = document.querySelector('#draggable');
if (isInViewport(myElem)) {
// Do something...
}
Complete explanation found here.
回答by Jose Vega
My solution is using the given code example, and it will show you an overall idea of how to determine whether the li element is visible. Check out the jsFiddlewhich contains code from your question.
我的解决方案是使用给定的代码示例，它将向您展示如何确定 li 元素是否可见的总体思路。查看包含您问题中的代码的jsFiddle。
The jQuery .offset() method allows us to retrieve the current position of an element relative to the document. If you click on an li element inside the draggable, your offset from the top will be between 0 and 500 and the offset from the left should be between 0 and 500. If you call the offset function of an item that is not currently visible, the offset will either be less than 0 or greater than 500 from either the top or left offset.
jQuery .offset() 方法允许我们检索元素相对于文档的当前位置。如果您单击可拖动对象内的 li 元素，则与顶部的偏移量将在 0 到 500 之间，而从左侧的偏移量应在 0 到 500 之间。如果您调用当前不可见的项目的偏移函数，偏移量将小于 0 或大于 500 与顶部或左侧偏移量。
If its not a daunting task I always like to code what I need from 'scrath' it gives me more flexibility when having to modify or debug, hence why I would recommend looking into using jQuery's offset function instead of using a plugin. If what you are trying to accomplish is fairly simple, using your own function will give you one less library to load.
如果它不是一项艰巨的任务，我总是喜欢从 'scrath' 编写我需要的代码，它在必须修改或调试时为我提供了更大的灵活性，因此我建议考虑使用 jQuery 的偏移功能而不是使用插件。如果您要完成的任务相当简单，使用您自己的函数将使您少加载一个库。
