使用css制作一个轮播

发表于 | 更新于

sroll-snap-type

1
2
3
div {
    scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
}
  • mandatory: 通常在 CSS 代码中我们都会使用这个，mandatory 的英文意思是强制性的，表示滚动结束后，滚动停止点一定会强制停在我们指定的地方
  • proximity: 英文意思是接近、临近、大约，在这个属性中的意思是滚动结束后，滚动停止点可能就是滚动停止的地方，也可能会再进行额外移动，停在我们指定的地方

scroll-snap-align

1
2
3
div {
    scroll-snap-align: start | center | end;
}

scroll-margin / scroll-padding

  • scroll-padding 是作用于滚动父容器，类似于盒子的 padding
  • scroll-margin 是作用于滚动子元素，每个子元素的 scroll-margin 可以设置为不一样的值，类似于盒子的 margin

简单的一个demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>test scroll-snap-type</title>
    <style>
      .outer {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        overflow-y: auto;
        border: 1px solid #dbdbdb;
        scroll-snap-type: y mandatory;
      }
      .item {
        height: 300px;
        widows: 300px;
        background: black;
        border: 20px solid #dbdbdb;
        box-sizing: border-box;
        scroll-snap-align: center;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

查看兼容 can I use