当用户从页面的顶部位置滚动到页面的底部位置(即 1 秒)快速(即 1 秒)时,使用 jquery 检测和执行操作很热门?(仅当页面可滚动时)
希望找到基于相对值的通用解决方案,而不是 html 标记(页面上的元素)。
注意:认为需要检查以确保 DOM 就绪后的用户视点位于页面顶部。
您可以使用基于两个元素的定时事件,这将非常准确
如果你想扩展它,你可以使用几个元素并计算出元素之间的平均速度:)
<script>
var finalFired = false;
var now = new Date().getTime();
function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).scroll(function(){
if(!finalFired){
if(isScrolledIntoView("div:last")){
finalFired = true;
var then = new Date().getTime();
alert(then-now);
}
}
});
</script>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>