iT邦幫忙

2023 iThome 鐵人賽

DAY 20
0
Modern Web

你應該要知道的CSS技巧:發掘被忽略但實用的屬性系列 第 20

【Day20】流暢滾動的魔法 - CSS scroll-snap

  • 分享至 

  • xImage
  •  

CSS scroll-snap

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

CSS Scroll-snap是什麼?

  • Scroll Snap可以讓你在滾動容器中定義滾動位置,使滾動到特定位置時會自動吸附停止。
  • Scroll Snap經常用於輪播、圖片庫或任何需要在滾動期間捕捉特定位置的狀況。

容器上的属性

屬性
scroll-snap-type 容器的定義滾動類別屬性,值有mandatory強制滾動捕捉,確保容器總是停在捕捉點;以及proximity建議瀏覽器應該捕捉到最近的捕捉點,但不強制執行。ex: scroll-snap-type: x mandatory; /* 用於水平滾動 */
scroll-padding 定義滾動視窗的內邊距,也可以分開寫scroll-padding-leftscroll-padding-rightscroll-padding-topscroll-padding-bottom

子元素上的属性

屬性
scroll-snap-align 用於子元素定義捕捉點,start(容器將捕捉到元素的開始處)、end(捕捉到元素的結束處)、center(捕捉到元素的中心),或 none(不捕捉)。
scroll-margin 定義元素的滾動位置外邊距,也可以分開寫scroll-margin-leftscroll-margin-rightscroll-margin-topscroll-margin-bottom
scroll-snap-stop 定義在觸控裝置上,滾動位置是否可以超過定義好的吸附位置,normal可以超過吸附位置,always不可超過吸附位置。

以下為範例:
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{
  ...
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
section{
  ...
  scroll-snap-align: start;
}
...

Codepen範例

IT15-Day20-CSS snap

參考來源


上一篇
【Day19】打造更流暢的滾動體驗 - CSS Scroll Behavior
下一篇
【Day21】讓你的滾動條更符合你的品牌形象 - CSS Scrollbar Styling
系列文
你應該要知道的CSS技巧:發掘被忽略但實用的屬性30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言