在网页中,有些元素不是在第一屏显示,那么我们需要滚动才能看到对应的元素。这里就根据此来动态计算滚动到某个元素所有的速度,以此来分析用户是否“认真”阅读网页上的内容。
计算思路是:滚动距离+屏幕高度>元素距顶部的距离 然后在用 (滚动距离/滚动时间)*1000
在这里滚动距离和高度以及元素距顶部高度比较容易获取 ,其中的滚动时间一般是从开始滚动到以及页面显示出目标元素位置的时间差 但是这里会出现一种用户在浏览网页的时候回看(向上滚动)这一点就会对计算速度造成比较大的误差。所以这里我们再计算的时候还得计算出所有向上滚动过的时间
代码如下:
function initScrollSpeed(selector, fn) {
var targetDom = $(selector);
var innerHeight = window.innerHeight;
var top = targetDom.offset().top;
if(top <= innerHeight) {
fn && fn({
speed: 0,
diffTime: 0
});
return;
}
$(window).scroll(function() {
if(targetDom.data("show"))
return;
if(!targetDom.data("loadTime"))
targetDom.data("loadTime", new Date().getTime());
var scrollTop = $(window).scrollTop() + innerHeight;
var before = targetDom.data("before") || 0;
var time = new Date().getTime();
if(before < scrollTop) {
var toUpTime = targetDom.data("toUpTime");
toUpTime = toUpTime ? parseInt(time - toUpTime) : 0;
targetDom.removeData("toUpTime");
var toUpTotalTime = targetDom.data("toUpTotalTime") || 0;
toUpTotalTime = parseInt(toUpTotalTime) + toUpTime;
targetDom.data("toUpTotalTime", toUpTotalTime);
} else if(before > scrollTop) {
var toUpTime = targetDom.data("toUpTime");
if(!toUpTime) {
targetDom.data("toUpTime", new Date().getTime());
}
}
targetDom.data("before", scrollTop);
if(scrollTop > top) {
var toUpTotalTime = targetDom.data("toUpTotalTime") || 0;
var loadTime = targetDom.data("loadTime");
var diffTime = time - loadTime - toUpTotalTime;
var speed = parseInt((scrollTop / diffTime) * 1000);
targetDom.data("show", true);
fn && fn({
speed: speed,
toUpTotalTime: toUpTotalTime,
loadTime: loadTime,
endTime: time,
diffTime: diffTime
});
}
});
}
如果您有更好的计算思路或者对此方法有优解请给我留言奥.