zoukankan      html  css  js  c++  java
  • 平滑滚动

    一 css 特性 scroll-behavior

    凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!

    二 js 特性

    1.Element.scrollIntoView({behavior:'smooth'});平滑回到顶部
    // 点击按钮让body滚动条回到顶部
    function returnTop (){
          document.body.scrollIntoView({behavior:'smooth'});
    }
    
    2.Element.scrollTo({top:1000,left:1000,behavior:'smooth'});
    document.body..scrollTo({top:1000,left:1000,behavior:'smooth'})
    
    3.copy一下大佬的滚动函数
    /**
     
     @description 页面垂直平滑滚动到指定滚动高度
     @author zhangxinxu(.com)
    */
    var scrollSmoothTo = function (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();
    };
    
  • 相关阅读:
    React.Fragment
    微信分享
    视频H5 video标签最佳实践
    详解vue2.0+vue-video-player实现hls播放全过程
    call()和appl()的理解
    JS 原生面经从初级到高级
    vue面试
    面试题2
    IdentityServer4 实现 OpenID Connect 和 OAuth 2.0
    DDD关键知识点整理汇总
  • 原文地址:https://www.cnblogs.com/honkerzh/p/14290593.html
Copyright © 2011-2022 走看看