如何检测 Html 元素在 View 中？

【问题标题】：How to detect that an Html element is in View?如何检测 Html 元素在 View 中？
【发布时间】：2010-04-01 04:49:22
【问题描述】：

最好使用 Jquery，如何检测元素是否在浏览器的可视客户区域内？

我正在从数据集动态创建一个菜单，当列表变得太长时，生成的菜单的高度会导致它的一部分低于浏览器底部客户区。如何检测到这一点并采取相应措施？

【问题讨论】：

标签： jquery html height

【解决方案1】：

我相信应该可以使用position() 和scrollTop() 来制作一些东西（如果您的页面容易水平滚动，请添加scrollLeft）。以下是一些未经测试的示例代码，如果目标元素（全部或部分）在视口内，则应显示一条消息：

var pos = $('#element').position(), win = $(window);

if (pos.top < win.height() + win.scrollTop() && pos.bottom > win.scrollTop()) {
    alert('Look at me!');
}

如果您特别关心完全可见性，则可以交换条件：

if (pos.bottom < win.height() + win.scrollTop() && pos.top > win.scrollTop()) {

添加对视口水平滚动的支持留给读者作为练习:)

【讨论】：