css的scroll-behavior属性和js的scrollIntoView方法实例

scroll-behavior，翻译的意思为滚动行为，默认值是auto，没有丝滑滚动效果，还有一个值为smooth，翻译过来就是平滑的，它是滚动框通过一个用户代理预定义时长、时间函数来实现丝滑的滚动。

不过在兼容性上，对于移动端，安卓的兼容性还不错，ios手机上浏览器基本都不支持丝滑滚动，这时就需要使用js中的scrollIntoView方法和smoothscroll-polyfill插件来解决。

scrollIntoView的参数类型如下：

    type alignToTop = boolean
    type scrollIntoViewOptions = {
      behavior: 'auto' | 'smooth'
      block: 'start' | 'center' | 'end' | 'nearest'
      inline: 'start' | 'center' | 'end' | 'nearest'
    }

    interface Element {
      scrollIntoView(arg?: alignToTop | scrollIntoViewOptions): void
    }

scrollIntoView，字面意思为滚动进入视图，该方法有两种可选参数，alignToTop参数，字面意思为顶部对齐，值为true or false，默认为true，就是触发滚动的元素在滚动区的可视区域内是顶端对齐还是底端对齐；scrollIntoViewOptions参数，字面意思为滚动进入视图的选项，是个对象形式，如下又三个可选项：

behavior：定义动画的过渡效果，值为auto或smooth之一，默认为auto。这个就跟css中scroll-behavior属性值一样。
block：定义垂直方向的对齐，值为 start, center, end, 或 nearest之一。默认为 start。
inline：定义水平方向的对齐，值为 start, center, end, 或 nearest之一。默认为 nearest。
着重解释下nearest这个值，字面意思为最近的，表示如果元素完全在视口内，则不发生滚动；如果元素未能完全在视口内，则根据最短滚动距离原则，滚动父级容器，使元素完全在视口内。

当alignToTop传入参数为true时，相当于{behavior: 'auto', block: 'start', inline: 'nearest'}

当alignToTop传入参数为false时，相当于{behavior: 'auto', block: 'end', inline: 'nearest'}