移动端滚动条滚动收集

1.锚点链接

2.document.getElementById(rewardid).scrollIntoView(); 

3.

复制代码
Math.easeout = function (A, B, rate, callback) {
    if (A == B || typeof A != 'number') {
        return;    
    }
    B = B || 0;
    rate = rate || 2;
    
    var step = function () {
        A = A + (B - A) / rate;
        
        if (A < 1) {
            callback(B, true);
            return;
        }
        callback(A, false);
        requestAnimationFrame(step);    
    };
    step();
};
复制代码
var doc = document.body.scrollTop? document.body : document.documentElement;
Math.easeout(doc.scrollTop, 0, 4, function (value) {
    doc.scrollTop = value;
});

 页面滚动到指定位置:

复制代码
const rewardid = getUrlParameter('reward_id');
                         const rewardEle = document.getElementById(rewardid); 
                            if(rewardid && rewardEle){
                              let re = rewardEle.getBoundingClientRect();
                              this.scrollSmoothTo(re.top - 150);
                            } 

-----------------------------------------------------


scrollSmoothTo(position) {
                if (!window.requestAnimationFrame) {
                        window.requestAnimationFrame = function(callback, element) {
                            return setTimeout(callback, 17);
                    };
                }
                // 当前滚动高度
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                // 滚动step方法
                var step = function () {
                    // 距离目标滚动距离
                    var distance = position - scrollTop;
                    // 目标滚动位置
                    scrollTop = scrollTop + distance / 5;
                    if (Math.abs(distance) < 1) {
                        window.scrollTo(0, position);
                    } else {
                        window.scrollTo(0, scrollTop);
                        requestAnimationFrame(step);
                    }
                };
                step();
            }
复制代码

 

posted @   创业男生  阅读(141)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
历史上的今天:
2018-05-07 Vue下拉刷新组件
2018-05-07 【转载】Vue 2.x 实战之后台管理系统开发(二)
2018-05-07 [转载]Vue 2.x 实战之后台管理系统开发(一)
点击右上角即可分享
微信分享提示