資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時裝學
法學使用純 CSS 平滑滾動
CSS scroll-behavior 屬性允許我們更改滾動行為。以下是在滾動框中設定的值 -
auto - 在滾動框內的元素之間設定滾動效果。
Smooth - 在元素之間設定平滑的動畫滾動效果。以下示例展示了 CSS scroll-behavior 屬性。
平滑滾動行為
為 div 容器設定平滑的滾動行為 -
#parent {
scroll-behavior: smooth;
width: 250px;
height: 200px;
overflow-y: scroll
}
以下是用於設定滾動的 div 容器 -
<div id="parent"> <div class="blue" id="first"><a href=#last>Last</a></div> <div class="pink"></div> <div class="blue"></div> <div class="pink" id="last"><a href=#first>First</a></div> </div>
示例
讓我們看示例 -
<!DOCTYPE html>
<html>
<head>
<style>
html {
line-height: 200px;
margin: 30px;
text-align: center;
vertical-align: middle;
}
#parent {
scroll-behavior: smooth;
width: 250px;
height: 200px;
overflow-y: scroll
}
.pink {
height: 200px;
box-shadow: inset 0 0 50px deeppink;
}
.blue {
height: 200px;
box-shadow: inset 0 0 50px darkblue;
}
</style>
</head>
<body>
<div id="parent">
<div class="blue" id="first"><a href=#last>Last</a></div>
<div class="pink"></div>
<div class="blue"></div>
<div class="pink" id="last"><a href=#first>First</a></div>
</div>
</body>
</html>
自動滾動行為
為 div 容器設定平滑的滾動行為 -
#parent {
scroll-behavior: auto;
width: 150px;
height: 150px;
overflow: hidden;
border: 22px groove tomato;
border-radius: 50%;
}
以下是父級 div -
<div id="parent"> <div class="blue" id="first"><a href=#last>Last</a></div> <div class="green"></div> <div class="blue"></div> <div class="green" id="last"><a href=#first>First</a></div> </div>
示例
讓我們看示例 -
<!DOCTYPE html>
<html>
<head>
<style>
html {
line-height: 150px;
margin: 30px;
text-align: center;
vertical-align: middle;
}
#parent {
scroll-behavior: auto;
width: 150px;
height: 150px;
overflow: hidden;
border: 22px groove tomato;
border-radius: 50%;
}
.green {
height: 150px;
box-shadow: inset 0 0 50px darkgreen;
}
.blue {
height: 150px;
box-shadow: inset 0 0 50px darkblue;
}
</style>
</head>
<body>
<div id="parent">
<div class="blue" id="first"><a href=#last>Last</a></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green" id="last"><a href=#first>First</a></div>
</div>
</body>
</html>
更新時間: 2023 年 12 月 27 日
370 次瀏覽
廣告