用于检测项目是否由于滚动而不再可见的Javascript
用于检测项目是否由于滚动而不再可见的Javascript
提问于 2011-06-08 13:30:30
在我的页面顶部有一个javascript幻灯片。当幻灯片切换到下一个图像时，我调用另一个函数来更改页面的背景颜色。
当幻灯片不再在视图中时，即当用户向下滚动页面时，客户端希望背景颜色停止改变。
有没有办法检测元素是否由于滚动而不再可见？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-06-08 13:50:28
您可以使用jQuery $.scrollTop函数，可能是从scroll事件处理程序来编写脚本。
Stack Overflow用户
发布于 2011-06-08 13:49:25
jQuery中的测试代码
function test() {
var $elem = $('.test');
var visibleAtTop = $elem.offset().top + $elem.height() >= $(window).scrollTop();
var visibleAtBottom = $elem.offset().top <= $(window).scrollTop() + $(window).height();
if (visibleAtTop && visibleAtBottom) {
alert('visible');
} else {
alert('invisible (at ' + (visibleAtTop ? 'bottom' : 'top') + ')');
}
}http://jsfiddle.net/9PaQc/1/的完整工作示例(更新：http://jsfiddle.net/9PaQc/2/ )
附注:此选项仅检查垂直滚动。对于水平方向，只需将top替换为left、Y -> X和height() -> width()即可
编辑
通过更改window.scrollY -> $(window).scrollTop()实现了完全jQuery (以确保x-browser兼容性)
Stack Overflow用户
发布于 2011-06-08 13:38:31
使用window.pageYOffset确定窗口中的滚动量。使用对象的当前偏移检查对象是否在视图中。请注意，这些值主要取决于浏览器，因此首先检查它是否存在，然后对其执行操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6274577
复制相关文章
相似问题
腾讯云开发者
