如何检测Html元素是否在View中？

Question

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

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

Answer 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()) {

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