[CSS] 滑鼠選軸滾動 scroll

滑順捲到某個位置（Smooth Scroll）

// 在有捲軸的地方下

html {
  scroll-behavior: smooth;
}

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

Scroll Behavior @ CSS Tricks

避免捲到外層（父層）元素的捲軸

div {
  overscroll-behavior: contain;
  /* 或 overscroll-behavior-y: contain;
}

Prevent Scroll Chaining With Overscroll Behavior

調整捲動到的邊距（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