阅读 653

CSS: 纵享丝滑滚动

小陈有这样一个需求:移动端用户进到页面后,页面滚动到课程列表页的当前学习课程部分(即滚动到特定位置)。

一、顿挫干瘪的滚动

初看这个需求,是不是超级简单。

只需要利用 a 标签的锚点功能,就能让页面滚动到指定位置:

<a href="#a">课程A</a>

实际效果:

640.gif

眉头一皱,这顿挫感,犹如坐着八十年代拖拉机一般蓝瘦~

二、scroll-behavior

不要慌,只需要一行简单的 CSS 代码,就能让你的页面纵享德芙般丝滑。

.container {
    scroll-behavior: smooth; 
}
复制代码

640 (1).gif

怎么样,是不是丝滑般顺畅,而且代码极其简单。

别高兴的太早了,再通过 caniuse 来看看它的兼容性:

image.png

眉头一皱,果然事情不简单,这个特性在移动端 ios 基本不支持。那么在 ios 上只能通过传统的 JS 来实现丝滑滚动了。

三、JS 也能纵享丝滑

方法一:scrollIntoView

scrollIntoView 是原生的 JS API。通过一段简单的代码,也能实现丝滑滚动。

target.scrollIntoView({
    behavior: "smooth"
});
复制代码

image.png

虽然 scrollIntoView 也能实现,但是它的浏览器支持度并不友好,在 ios 上依然不支持,谨慎使用。

方法二:JQuery

JQuery animate() 就能实现这样一个简单的动画:

scrollContainer.animate({
    scrollTop: 0
});
复制代码

方法三:手撕JS

自己手撕一个德芙滑动其实也很简单,直接上代码:

image.png

光看代码感受不到那般丝滑,来看看效果图对比:

640 (2).gif

丝滑般感受,就是如此简单~

文章分类
前端
文章标签