1，指定元素的出现位置

// start出现在视口顶部、center出现在视口中央、end出现在视口底部
document.querySelector(".box").scrollIntoView({
  block: "start" || "center" || "end"
});

2，设置滚动具有平滑的过渡效果

window.scrollTo({
  behavior: "smooth"
});

window.scrollBy({
  behavior: "smooth"
});

document.querySelector(".box").scrollIntoView({
  behavior: "smooth"
});

利用css

或者用css属性设置：
html {
  scroll-behavior: smooth; // 全局滚动具有平滑效果
}

// 或者所有
* {
 scroll-behavior: smooth;
}

3，解决IOS设备局部滚动不顺畅(粘手)

.box {
  -webkit-overflow-scrolling: touch;
}

4，滚动传播

指有多个滚动区域，当一个滚动区域滚动完之后，继续滚动会传播到到父区域继续滚动的行为：

.box {
  overscroll-behavior: contain; // 阻止滚动传播
}

5，横向滚动

<div class="box">
    <ul>
        <li>
            <img src="../assents/aa.jpg">
        </li>
        <li>
            <img src="../assents/bb.jpg">
        </li>
        <li>
            <img src="../assents/cc.jpg">
        </li>
        <li>
            <img src="../assents/dd.jpg">
        </li>
    </ul>
</div>


.box{
            width: 500px;
            height: 200px;
            overflow: hidden;
        }
        ul{
          /*超出不换行*/
            white-space: nowrap;   
            overflow-x: auto;
            cursor: pointer;
        }
        li{
            display: inline-block;
        }
        li img{
            display: block;
            width: 200px;
            height: 200px;
        }

滚动结束后，强制滚动到指定元素
基于上面的例子，我们设置如下属性：

 <style>
        .box{
            width: 500px;
            height: 200px;
            overflow: hidden;
        }
        ul{
            /*超出不换行*/
            white-space: nowrap;
            overflow-x: auto;
            cursor: pointer;
            scroll-snap-type: x mandatory;
        }
        li{
            display: inline-block;
            scroll-snap-align: start;
        }
        li img{
            display: block;
            width: 400px;
            height: 200px;
        }
    </style>

效果如下：

仔细看会发现，我们松手的时候，会将最近的元素滚动到最右边（初始位置，对于Y轴来讲就是顶部，X轴则是右边）

也可以设置出现在中间：

<style>
        .box{
            width: 500px;
            height: 200px;
            overflow: hidden;
        }
        ul{
            /*超出不换行*/
            white-space: nowrap;
            overflow-x: auto;
            cursor: pointer;
            scroll-snap-type: x mandatory;
        }
        li{
            display: inline-block;
            scroll-snap-align: center;
        }
        li img{
            display: block;
            width: 400px;
            height: 200px;
        }
    </style>

效果如下：

6,横向滚动一屏

<div class="box">
    <ul>
        <li>
            <img src="../assents/aa.jpg">
        </li>
        <li>
            <img src="../assents/bb.jpg">
        </li>
        <li>
            <img src="../assents/cc.jpg">
        </li>
        <li>
            <img src="../assents/dd.jpg">
        </li>
        <li>
            <img src="../assents/cc.jpg">
        </li>
        <li>
            <img src="../assents/dd.jpg">
        </li>
        <li>
            <img src="../assents/cc.jpg">
        </li>
        <li>
            <img src="../assents/dd.jpg">
        </li>
    </ul>
</div>

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
             width: 100vw;
             height:80vh;
             overflow: hidden;
         }
        ul{
            /*超出不换行*/
            white-space: nowrap;
            overflow-x: scroll;
            cursor: pointer;
            scroll-snap-type: x mandatory;
            list-style: none;
        }
        li{
            display: inline-block;
            width: 100vw;
            height: 50vh;
            scroll-snap-align: center;

        }
        li img{
            display: block;
            width:100%;
            height: 100%;
        }
    </style>

6，纵向滚动一屏

<div class="box">
    <ul>
        <li>
            <img src="../assents/aa.jpg">
        </li>
        <li>
            <img src="../assents/bb.jpg">
        </li>
        <li>
            <img src="../assents/cc.jpg">
        </li>
        <li>
            <img src="../assents/dd.jpg">
        </li>
        <li>
            <img src="../assents/cc.jpg">
        </li>
        <li>
            <img src="../assents/dd.jpg">
        </li>
    </ul>
</div>

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
             width: 100vw;
             height:100vh;
             overflow: hidden;
         }
        ul{
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            list-style: none;
            /*一定要给ul高度，不然你不能滚动*/
            height:5000px;
        }
        li{
            display: block;
            width: 100vw;
            height:100vh;
            scroll-snap-align: start;
        }
        li img{
            display: block;
            width:100%;
            height: 100%;
        }
    </style>