滚动是和界面相关的一项重要功能,一个合理的滚动设置可以使得网页的用户体验更好,创造出更美好的阅读体验。scroll是CSS和Javacsript中与滚动相关的函数和属性。
在做滚动时我们常会遇到的问题有:滚动卡顿、滚动不流畅、滑动不流畅、惯性滑动体验优化。针对这些问题,我们有相应的解决方法。
滚动卡顿,如何优化?
滚动卡顿是用户体验最不友好的一种问题之一,如何避免呢?
1.使用硬件加速
2.防止多余的布局
3.避免大型阴影
怎样让网站的滚动更流畅?
1.使用CSS对象属性
2.使用requestAnimationFrame
怎样让滑动更流畅?
1.不在touchmove中处理DOM节点
2.减少touchmove中计算量
3.使用CSS transform来优化
如何优化惯性滚动的体验?
1.使用CSS transition或者transform来代替Javascript动画
2.使用requestAnimationFrame来优化定时器
3.控制卡顿问题,优化网页性能