如何确定HTML控件是否显示在页面中

How to determine if HTML Control is being displayed in page?

本文关键字：显示 是否 何确定 HTML 控件      更新时间：2023-09-26

我想知道如何在此时此刻只获取屏幕中显示的控件。

例如：

如果我有一个滚动条，它阻止用户查看所有内容在页面下方，我想制作一个选择器，它只选择用户现在可以在屏幕上看到的内容。如果我能选择他看不到的所有东西，那也太好了。

这可能吗？怎样

感谢

您可以计算用户可以看到的东西的偏移量（比如，当用户滚动时）：

var top = $(window).scrollTop();
var bottom = top + $(window).height();

然后，您可以查看元素是否在此范围内。

$('*').each( function() {
  var el = $(this);
  var offsetTop = el.offset().top;
  var inView = offsetTop >= top && offsetTop <= bottom;
  el.addClass( inView ? 'in-view' : 'out-of-view' );
} );

显然，这样做在性能方面有一些缺点。根据您想对这些信息做什么，您可以只选择input或任何可能有帮助的内容。

我不知道是否有一个简单或优雅的解决方案。您可以计算所有元素的偏移位置和滚动偏移，以找出哪些元素可见或不可见。如果你有很多元素要检查，这可能会变得很昂贵，但在其他方面可能会很好地工作。

相关文章：