新手指南：輕鬆掌握 CSS scroll-behavior 屬性
更新日期： 2024 年 9 月 14 日
在網頁設計中，滾動效果是用戶體驗的重要組成部分。
良好的滾動體驗，可以讓網站更加順滑和易用。
CSS 提供了一個簡單的屬性來控制滾動行為——scroll-behavior。
這篇文章將帶你了解 scroll-behavior 是什麼，以及如何使用它來優化網頁的滾動效果。
什麼是 scroll-behavior？
scroll-behavior 是一個 CSS 屬性，用於控制滾動容器內部的滾動方式。
簡單來說，它能讓滾動行為更為平滑，提升用戶體驗。
當用戶點擊內部鏈接或進行滾動時，scroll-behavior 可以決定滾動是「瞬間完成」還是「平滑過渡」。
特別是在處理內部連結跳轉或滾動到特定元素時，平滑的滾動效果可以避免突然跳動的感覺，從而提供更好的用戶體驗。
scroll-behavior 的基本用法
scroll-behavior 屬性可以應用於整個頁面（即 html 和 body），也可以應用於特定的滾動容器。
這個屬性有兩個主要的值：
- auto（預設值）：滾動瞬間完成，沒有平滑過渡效果。
- smooth：滾動時會平滑過渡。
語法
element {
scroll-behavior: auto | smooth;
}例子：應用於整個頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scroll Example</title>
</head>
<body>
<nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>
<section id="section1">
<h2>Section 1</h2>
<p>內容 1...</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>內容 2...</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>內容 3...</p>
</section>
</body>
</html>html {
scroll-behavior: smooth;
}
section {
height: 100vh;
padding: 20px;
}在這個例子中，我們將 scroll-behavior: smooth; 設置在 html 元素上。
這樣當用戶點擊導航中的內部連結時，頁面會平滑地滾動到對應的區域（section1、section2 或 section3），而不是瞬間跳轉。
scroll-behavior 在特定容器中的應用
除了應用於整個頁面，你也可以在具有滾動條的特定容器中使用 scroll-behavior 來實現平滑滾動。
例如，一個內部滾動區域的對話框或側邊欄：
<div class="scroll-container">
<a href="#item3">滾動到 Item 3</a>
<div id="item1">Item 1</div>
<div id="item2">Item 2</div>
<div id="item3">Item 3</div>
<div id="item4">Item 4</div>
<div id="item5">Item 5</div>
</div>.scroll-container {
overflow-y: scroll;
height: 300px;
scroll-behavior: smooth;
}在這個例子中，當用戶點擊鏈接時，滾動容器會平滑地滾動到 item3，而不是突然跳到目標位置。
結語
scroll-behavior 是一個小而強大的 CSS 屬性，可以輕鬆地提升頁面滾動的用戶體驗。
無論是在整個頁面上使用，還是在特定的滾動容器中應用，這個屬性都能讓滾動效果更加自然流暢。
希望這篇文章能幫助你理解 scroll-behavior 的用法，讓你的網頁設計更上一層樓！