由于滚动发送的条目查看内容不再显示

问题描述：

我在页面顶部有一个javascript幻灯片放映。当幻灯片切换到下一张图像时，我会调用另一个函数来更改页面的背景颜色。由于滚动发送的条目查看内容不再显示

当幻灯片不再显示时，即用户向下滚动页面时，客户端希望背景颜色停止更改。

有什么方法可以检测元素是否因滚动而不再可见？

可能的重复[如何检查一个元素是否真的可以用javascript。]（http://*.com/questions/704758/how-to-check-if-an-element-is-really-visible -shell） – 2011-06-08 05:33:53

@ Box9：这个问题需要三个信息，其中滚动是一个，但两年后没有任何真正的滚动回答，这个问题（不像这个）说他们使用Prototype。所以我会说这应该是独立的。 – 2011-06-08 05:43:10

答

您可以使用jQuery $.scrollTop函数，可能从scroll事件处理函数来编写脚本。

现在接受这个答案，因为它非常简单... – demoncodemonkey 2011-07-05 08:42:26

答

使用window.pageYOffset确定窗口中的滚动量。使用对象的当前偏移量来检查它是否在视图中。请注意，这些值主要取决于浏览器，因此首先检查它是否存在，然后对其执行操作。 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()

编辑

使这一切的方式jQuery的（保证X-浏览器的兼容性）通过改变window.scrollY - >$(window).scrollTop()

太棒了。完美的答案和例子，它的作品非常漂亮。谢谢:) – demoncodemonkey 2011-06-08 09:46:53

由于滚动发送的条目查看内容不再显示

相关推荐