PJCHENder 未整理筆記

[CSS] 滑鼠選軸滾動 scroll

2018-08-30

[CSS] 滑鼠選軸滾動 scroll

@(CSS)

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

1
2
3
4
5
// 在有捲軸的地方下

html {
scroll-behavior: smooth;
}

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

Scroll Behavior @ CSS Tricks

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

1
2
3
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)。

1
2
3
body {
scroll-padding: 50px 0 0 50px;
}

scroll-padding @ CSS Tricks

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

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

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

1
2
3
4
5
6
7
8
<!-- 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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

1
2
3
4
5
6
7
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: purple green;
scrollbar-width: thin;
}

Webkit-based

1
2
3
4
5
6
7
8
9
10
11
12
::-webkit-scrollbar {
}
::-webkit-scrollbar-button {
}
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-track {
}
::-webkit-scrollbar-corner {
}
::-webkit-resizer {
}

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

掃描二維條碼,分享此文章