当用户从页面顶部位置到页面底部位置滚动(他的观点)快速(即1秒)时,用jquery检测并执行动作很热门? (仅当页面可滚动时)
想要找到基于相对值的通用解决方案,而不是基于html标记(页面上的元素)。
注意: 我认为需要检查以确保DOM-ready之后的用户视点位于页面顶部。
答案 0 :(得分:1)
您可以使用基于两个元素的定时事件,这将是非常准确的
Check if element is visible after scrolling
如果你想扩展它,你可以使用几个元素并计算元素之间的平均速度:)
<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>