CSS Scroll Behavior

CSS Scroll-behavior支援度:Can I Use)

以往JS才能控制scroll，現在css也能輕鬆調整scroll行為了!

CSS Scroll-behavior是什麼?

• 可以用css直接指定有滾動內容元素的滾動行為

以下為範例:
template

<div id="app">
    <div class="btn_container">
      <a href="#section_A">A</a>
      <a href="#section_B">B</a>
      <a href="#section_C">C</a>
    </div>
    <div class="scroll_container">
      <section id="section_A">A</section>
      <section id="section_B">B</section>
      <section id="section_C">C</section>
    </div>
</div>

style

...
.scroll_container{
  width:200px;
  height:200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
...

Codepen範例

IT15-Day19-CSS scroll behavior

參考來源

• https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior