捲動行為 scroll-behavior、overscroll-behavior

這篇教學會介紹 scroll-behavior 和 overscroll-behavior 這兩個和「捲動」相關的 CSS 樣式屬性，scroll-behavior 可以設定「觸發捲動」時是否要流暢滑順的捲動跳轉，而 overscroll-behavior 可以設定在行動裝置瀏覽時，手指滑動超過捲動範圍的效果。

快速導覽：

捲動行為 scroll-behavior

超過捲動的行為 overscroll-behavior

CSS 教學 - 捲動行為 ( 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>

CSS 教學 - - 捲動行為 - scroll-behavior

超過捲動的行為 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>

CSS 教學 - - 捲動行為 - overscroll-behavior

小結

scroll-behavior 和 overscroll-behavior 這兩個和捲動相關的 CSS 樣式屬性通常作為「加強體驗效果」使用，例如點擊 STEAM 教育學習網教學文開頭的選單後，會使用捲動的方式跳到指定位置，而不是直接跳轉，如此一來在瀏覽過程中會更為順暢。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

捲動行為 scroll-behavior、overscroll-behavior