前言
最近在项目中要做一个菜单与路由列表联动的功能，无意中发现了这两个宝藏。最终的效果如下图：
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可以更加简单的实现这个效果。