css轮播(scroll-snap)

发布: 2021-01-07 10:56:45 标签: css

css轮播(scroll-snap)

主动滚动到临界点

01<!DOCTYPE html>
02<html lang="en">
03 <head>
04 <meta charset="UTF-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
06 <title>css轮播(scroll-snap)</title>
07 <style>
08 .container {
09 width: 300px;
10 height: 300px;
11 margin: 0 auto;
12 white-space: nowrap;
13 overflow-x: auto;
14 scroll-snap-type: x mandatory;
15 }
16 .item {
17 width: 280px;
18 height: 300px;
19 display: inline-block;
20 background-color: #eee;
21 margin-right: 10px;
22 scroll-snap-align: start;
23 }
24 </style>
25 </head>
26 <body>
27 <div class="container">
28 <div class="item">1</div>
29 <div class="item">2</div>
30 <div class="item">3</div>
31 <div class="item">4</div>
32 <div class="item">5</div>
33 <div class="item">6</div>
34 <div class="item">7</div>
35 <div class="item">8</div>
36 <div class="item">9</div>
37 <div class="item">10</div>
38 </div>
39 </body>
40</html>
复制代码

caniuse 查看兼容