scroll时不能平滑滚动的问题怎么处理

Posted 2023-04-03

1、阻止所有能导致页面滚动的事件。//scroll不能阻止，只能阻止mousewheel，鼠标拽滚动条就悲剧了；
2、bodyoverflow:hidden//win下右侧滚动条会消失导致页面横移，移动端阻止不了；
3、把滚动部分单独放在一个div里，和弹出部分同级，body和window同高。//所有涉及offset/scrollTop的方法都要修改。fix并且width100%的元素(比如微博顶栏)会压在内容区滚动条上；
4、弹出时算scrollTop，给内容区fix然后top移动到目前位置，同时body给一个overflow-y:scroll强撑出滚动条。 参考技术A 1、阻止所有能导致页面滚动的事件。//scroll不能阻止，只能阻止mousewheel，鼠标拽滚动条就悲剧了； 2、bodyoverflow:hidden//win下右侧滚动条会消失导致页面横移，移动端阻止不了； 3、把滚动部分单独放在一个div里，和弹出部分同级，body和window同高。//所有涉及offset/scrollTop的方法都要修改。fix并且width100%的元素(比如微博顶栏)会压在内容区滚动条上； 4、弹出时算scrollTop，给内容区fix然后top移动到目前位置，同时body给一个overflow-y:scroll强撑出滚动条。 参考技术B 我这边给出两个解决方案，
1，减少页面的dom节点数量，一个好的页面不能有太多太复杂的页面结构，影响页面渲染时候，页面渲染时间，具体的可以通过“document.getElementsByTagName('*').length”检查，
可以去看看已知的好的页面，看看他们的节点数来评估。
2，适当的节流，做一个假的滚动条，然后监听，当移动到一定程度时候，调整目标区域的scroll-top值。这样会大量减少，浏览器重绘次数，并列表结构时有较好体验。

前端 平滑滚动到底部/顶部

页面滚动时，添加平滑特效

1.在页面入口处，添加css

1 html {
2     scroll-behavior: smooth;
3 }

添加全局css之后，直接使用window.scroll(0,0)就可以平滑滚动到顶部了。

注：兼容性很差，仅支持火狐、chrome高级版本

2.指定滚动操作，使用平滑效果

平滑滚动到某块元素的底部：scrollIntoView

1     let anchorElement = document.getElementById("softwareHeader-container");
2     let scrollIntoViewOptions: ScrollIntoViewOptions = {
3         block: ‘end‘,
4         behavior: "smooth"
5     }
6     if (anchorElement) {
7         anchorElement.scrollIntoView(scrollIntoViewOptions)
8     }

或者平滑滚动到指定位置：ScrollToOptions、scrollTo

1   let scrollOptions:ScrollToOptions = {
2     left: 0,
3     top: 1000,
4     behavior:‘smooth‘
5   }
6 
7   window.scrollTo(scrollOptions);

兼容性：大部分支持，猎豹不支持。

3.添加JS滚动代码

滚动到顶部：

 1     returnTop = () => {
 2         //记录当前执行动画的标识
 3         let animationStepNumber;
 4         function exeucteAnimationByStep() {
 5             //当前页面的滚动高度
 6             let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 7             if (currentScrollTop >= 4) {
 8                 animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
 9                 let scrollLocationChanging = currentScrollTop / 9;
10                 scrollLocationChanging = scrollLocationChanging > 1 ? scrollLocationChanging : 1;
11                 let newScrollTop = currentScrollTop - scrollLocationChanging;
12                 window.scrollTo(0, newScrollTop);
13             } else {
14                 window.cancelAnimationFrame(animationStepNumber);
15                 window.scrollTo(0, 0);
16             }
17         }
18         animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
19     }

滚动到底部：

 1   scrollToPageBottom = () => {
 2     let animationStepNumber;
 3     function exeucteAnimationByStep() {
 4       let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 5       let totalHeight = (document.documentElement.scrollHeight || document.body.scrollHeight) - window.innerHeight;
 6       //剩余的高度
 7       let scrollingHeight = totalHeight - currentScrollTop;
 8       if (scrollingHeight >= 4) {
 9         animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
10         //滚动变量
11         let scrollChangedHeight = scrollingHeight / 9;
12         scrollChangedHeight = scrollChangedHeight > 1 ? scrollChangedHeight : 1;
13         window.scrollTo(0, currentScrollTop + scrollChangedHeight);
14       } else {
15         window.cancelAnimationFrame(animationStepNumber);
16         window.scrollTo(0, totalHeight);
17       }
18     }
19     animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
20   };

原理：

requestAnimationFrame，告诉浏览器重绘时执行动画，参数是具体执行方法，返回参数是nubmer（标识）

注：如果需要连续执行动画，则需要在回调函数中，先添加一个待执行动画回调requestAnimationFrame。（如上案例）

cancelAnimationFrame，取消待执行的动画。

注：执行完所有动画后，一定要注销上一个动画回调，否则会影响页面滚动（因为回调函数中的动画委托还在待处理呢）。

兼容性：平滑效果，支持所有浏览器。

缺陷：滚动过程中，不能操作手动滚动页面。这个缺陷，也有理论上的解法，可以添加滚动事件监听，如果滚动方向与平滑动画效果方向相反，则取消平滑动画的处理（调cancelAnimationFrame即可）