CSS scroll-behavior和JS scrollIntoView实现平滑滚动

前言

最近在项目中要做一个菜单与路由列表联动的功能，无意中发现了这两个宝藏。最终的效果如下图：

scroll-behavior

在css中滚动条是无法添加过渡效果的，查了一下有一种方式是通过定时器模拟过渡效果。
比如移动80px ，可以通过定时器，每一毫米移动10px，当移动完80px后清除定时器。
但是有个很严重的问题，如果点击的特别快，会导致上一个定时器还未清除，又生成了一个新的定时器，最终导致会出现鬼畜的效果，后来发现了scroll-behavior属性可以解决这个问题。

语法

scroll-behavior: auto;
scroll-behavior: smooth;

初始值是’auto’，scroll-behavior:smooth写在滚动容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑。

如果不加scroll-behavior:smooth，滚动会显的特别生硬

如果加上scroll-behavior:smooth 则会显得很平滑

scrollIntoView

最开始打算做平移时是打算通过scrollLeft的值来实现，但是需要频繁的进行算数。需要先获取每一个子元素的实际宽度，然后再计算需要加减的值具体是多少。

转折，后来灵光移动想起了锚点这个东西，通过a链接来实现锚点的跳转，这样也不需要进行算数了。但是在这里超链接显然是不合适的，后来发现了scrollIntoView

scrollIntoView用法有几个，但是都大同小异，这里说一下最基本的用法。其他用法可自行百度。

语法

dom.scrollIntoView()  //相当于dom.scrollIntoView(true)
或
dom.scrollIntoView(false)

获取到相应的dom元素，然后调用scrollIntoView即可

• 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
• .如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。

写了个例子看了下，没有看出与顶端（底端）对齐，当然也有可能是自己理解错误了。

注： 正常就用默认值就好，但是有两点要注意：

• 最开始显示的是1和2，如果要显示2和3的话要获取3对应的dom元素，而不是2对应的dom元素。如果一开始设置的初始位置是0，那么就需要加减窗口可以最多完整显示的个数，上面的例子是加减2
• 加减时要注意边界，不要到最后找不到相应的dom元素。

应用

除了我上面的那种应用，其实也可以拿来做轮播图（跑马灯），通过CSS scroll-behavior和JS scrollIntoView可以更加简单的实现这个效果。