[CSS] 滑鼠選軸滾動 scroll
滑順捲到某個位置(Smooth Scroll)
// 在有捲軸的地方下
html {
scroll-behavior: smooth;
}
這個方法可以搭配 window.location = #foobar
使用,一樣會有效果。
Scroll Behavior @ CSS Tricks
避免捲到外層(父層)元素的捲軸
div {
overscroll-behavior: contain;
/* 或 overscroll-behavior-y: contain;
}
調整捲動到的邊距(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;
}