CSS Scroll Snap（CSS滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动捕捉</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#main{
width: 600px;
height: 100px;
border: 2px slateblue solid;
margin: 100px;
overflow: auto;
scroll-snap-type: x mandatory;
}
#main ul{
width: 4000px;
}
#main li{
width: 300px;
height: 100px;
background: chartreuse;
float: left;
margin: 0 100px;
scroll-snap-align: end;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
扫一扫
750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
