数据结构
网络
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 次浏览
广告