如何检测Html元素在View中?

时间:2010-03-31 20:18:18

标签: jquery html height

最好使用Jquery,如何检测元素是否在浏览器的可查看客户区域内?

我正在从数据集动态创建菜单,当列表增长太长时,结果菜单的高度会导致其中一部分落在浏览器底部客户区域之下。我如何检测到并采取相应的行动?

1 个答案:

答案 0 :(得分:3)

我认为应该可以使用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()) {

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