卷动行为 ( scroll、overscroll )

这篇教学会介绍 scroll-behavior 和 overscroll-behavior 这两个和“卷动”相关的 CSS 样式属性，scroll-behavior 可以设定“触发卷动”时是否要流畅滑顺的卷动跳转，而 overscroll-behavior 可以设定在移动设备浏览时，手指滑动超过卷动范围的效果。

快速导览：

• 卷动行为 scroll-behavior
• 超过卷动的行为 overscroll-behavior

卷动行为 scroll-behavior

scroll-behavior 可以设定浏览器“触发卷动”( 例如链接前往特定位置 ) 的效果，没有继承特性，默认值为 auto，表示直接跳到指定的位置，如果设定为 smooth 则会出现卷动效果，采用卷动的方式移动到指定的位置，下方范例中点击超链接之后，设定 auto 的会直接跳到指定的位置，设定 smooth 则会使用卷动效果的方式前往指定位置。

线上展示：https://codepen.io/oxxo/pen/jENwmKO

<!-- HTML 程式碼 -->
<h1>scroll-behavior: auto;</h1>
<a href="#s1">apple</a><a href="#s2">banana</a><a href="#s3">oxxo</a>
<div class="a">
  <h2 id="s1">apple</h2>
  <h2 id="s2">banana</h2>
  <h2 id="s3">oxxo</h2>
</div>
<h1>scroll-behavior: smooth;</h1>
<a href="#s4">apple</a><a href="#s5">banana</a><a href="#s6">oxxo</a>
<div class="b">
  <h2 id="s4">apple</h2>
  <h2 id="s5">banana</h2>
  <h2 id="s6">oxxo</h2>
</div>

<!-- CSS 程式碼 -->
<style>
  body {text-align: center;}
  div {
    height: 100px;
    overflow: scroll;
    border: 1px solid #000;
    margin: 10px 10px 30px;
  }
  h1 {
    font-size: 24px;
    margin: 0;
  }
  h2 {
    margin: 0;
    height: 100px;
  }
  a {padding: 0 5px;}
  .a {scroll-behavior: auto;}
  .b {scroll-behavior: smooth;}
</style>

超过卷动的行为 overscroll-behavior

overscroll-behavior 可以设定“移动设备”滑动时“超过卷动范围”的行为效果，没有继承特性，默认值为 auto，和另外一个属性值 contain 相同，表示超过卷动范围后，可以继续滑动但出现反弹拉回的效果，如果设定为 none 则不会有任何反弹拉回的效果，但需要注意的是，由于移动设备浏览器对于“页面本身”都具有反弹拉回的效果，所以无法套用在页面本身，下方范例使用 div 的方式呈现 ( 需使用移动设备测试 )。

线上展示：https://codepen.io/oxxo/pen/ZYzyKqO

<!-- HTML 程式碼 -->
<h1>overscroll-behavior: auto;</h1>
<div class="a">
  <h2>apple</h2><h2>banana</h2><h2>peach</h2><h2>oxxo</h2><h2>orange</h2><h2>watermelon</h2><h2>pear</h2><h2>papaya</h2>
</div>
<h1>overscroll-behavior: contain;</h1>
<div class="b">
  <h2>apple</h2><h2>banana</h2><h2>peach</h2><h2>oxxo</h2><h2>orange</h2><h2>watermelon</h2><h2>pear</h2><h2>papaya</h2>
</div>
<h1>overscroll-behavior: none;</h1>
<div class="c">
  <h2>apple</h2><h2>banana</h2><h2>peach</h2><h2>oxxo</h2><h2>orange</h2><h2>watermelon</h2><h2>pear</h2><h2>papaya</h2>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    height: 200px;
    overflow: scroll;
    margin: 10px;
    border: 1px solid #000;
  }
  h1 {
    font-size: 20px;
    margin:20px 10px 0;
  }
  .a {overscroll-behavior: auto;}
  .b {overscroll-behavior: contain;}
  .c {overscroll-behavior: none;}
</style>

小结

scroll-behavior 和 overscroll-behavior 这两个和卷动相关的 CSS 样式属性通常作为“加强体验效果”使用，例如 点击 STEAM 教育学习网教学文开头的选单后，会使用卷动的方式跳到指定位置，而不是直接跳转，如此一来在浏览过程中会更为顺畅。

意见反馈