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

我的窗口里有一个非常大的可拖动的div 。 这个div有一个较小的窗口。

 
 
 
 
 
 
 
 
 .... 
 
  

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

Answer 1

看看这个插件

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

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

Answer 2

要检查元素是否在当前的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) ); } 

（ 来源 ）

对于更强大的方法，我建议使用Viewport选择器 ，它允许您只做：

 $("#elem:in-viewport") 

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之间。如果调用当前不可见的项目的偏移function，偏移量将从顶部或左侧偏移量小于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; }