Skip to main content

[CSS] 滑鼠選軸滾動 scroll

滑順捲到某個位置(Smooth Scroll)#

// 在有捲軸的地方下
html {  scroll-behavior: smooth;}

這個方法可以搭配 window.location = #foobar 使用,一樣會有效果。

Scroll Behavior @ CSS Tricks

避免捲到外層(父層)元素的捲軸#

div {  overscroll-behavior: contain;}

Using CSS Overscroll-Behavior To Prevent Scrolling Of Parent Containers From Within Overflow Containers

調整捲動到的邊距(scroll-padding)#

到網頁最上方有 Navbar 時,使用錨點的時候,scroll 後停留的位置可能會不太正確(Navbar 可能會擋住標題),這時候可以搭配使用 scroll-padding 這個屬性:

⚠️ iOS 目前仍不支援(2020-08-01)。

body {  scroll-padding: 50px 0 0 50px;}

scroll-padding @ CSS Tricks

為了解決在 Safari 上無法使用 scroll-padding 的問題,後來可以改用一種特別的方式:

h1#hash-tag {  // NOTE: Fix Safari not support  padding-top: 60px;  margin-top: -40px;}

捲動後停留在某元素的特定位置(Scroll Snapping)#

<!-- HTML --><div class="container">  <ul class="scroller">    <li>This is a list item</li>    <li>This is a list item</li>    <!-- ... -->  </ul></div>

在父層元素使用 scroll-snap-type,在子層元素使用 scroll-snap-align

.container {  max-height: 100vh;  overflow-y: scroll;  border: 1px solid gray;  scroll-snap-type: y mandatory;}
li {  border-bottom: 1px solid white;  padding: 1rem;  height: 100vh;  font-size: 1.2rem;  color: white;  text-align: center;  display: flex;  flex-direction: column;  justify-content: center;  scroll-snap-align: start;}

Practical CSS Scroll Snapping @ CSS Tricks

修改 ScrollBar 樣式#

可以參考 CodePen 上的範例。

Firefox#

.scroller {  width: 300px;  height: 100px;  overflow-y: scroll;  scrollbar-color: purple green;  scrollbar-width: thin;}

Webkit-based#

::-webkit-scrollbar {}::-webkit-scrollbar-button {}::-webkit-scrollbar-thumb {}::-webkit-scrollbar-track {}::-webkit-scrollbar-corner {}::-webkit-resizer {}

Firefox: CSS scrollbar @ MDN Chrome: ::-webkit-scrollbar @ MDN