jquery 计算页面滚动到某个元素的速度

在网页中,有些元素不是在第一屏显示,那么我们需要滚动才能看到对应的元素。这里就根据此来动态计算滚动到某个元素所有的速度,以此来分析用户是否“认真”阅读网页上的内容。

计算思路是:滚动距离+屏幕高度>元素距顶部的距离 然后在用 (滚动距离/滚动时间)*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
            });
        }
    });
}

如果您有更好的计算思路或者对此方法有优解请给我留言奥.

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值