刚看了下张大神的博客,又有新发现。
原文地址:大侠,请留步,要不过来了解下CSS Scroll Snap?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>index</title>
<style>
*{margin:0;padding:0;}
#box .wrapper {
width:750px;
height: 400px;
font-size:105px;
overflow:auto;
color:#fff;
scroll-behavior: smooth; /**平滑滚动**/
scroll-snap-type: y mandatory; /**滚动方向**/
}
#box .wrapper div {
float:left;
width:750px;
height: 400px;
scroll-snap-align: start; /**滚动贴齐元素**/
}
</style>
</head>
<body>
<div id="box">
<div class="wrapper">
<div style="background:red;">1</div>
<div style="background:pink;">2</div>
<div style="background:yellow;">3</div>
<div style="background:green;">4</div>
</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>