使用css制作一个轮播
发布: 2019-12-08 16:34:32标签: css
sroll-snap-type
01div {02 scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?03}04- mandatory: 通常在 CSS 代码中我们都会使用这个，mandatory 的英文意思是强制性的，表示滚动结束后，滚动停止点一定会强制停在我们指定的地方
- proximity: 英文意思是接近、临近、大约，在这个属性中的意思是滚动结束后，滚动停止点可能就是滚动停止的地方，也可能会再进行额外移动，停在我们指定的地方
scroll-snap-align
01div {02 scroll-snap-align: start | center | end;03}scroll-margin / scroll-padding
- scroll-padding 是作用于滚动父容器，类似于盒子的 padding
- scroll-margin 是作用于滚动子元素，每个子元素的 scroll-margin 可以设置为不一样的值，类似于盒子的 margin
简单的一个demo
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 <meta http-equiv="X-UA-Compatible" content="ie=edge" />07 <title>test scroll-snap-type</title>08 <style>09 .outer {10 width: 300px;11 height: 300px;12 margin: 100px auto;13 overflow-y: auto;14 border: 1px solid #dbdbdb;15 scroll-snap-type: y mandatory;16 }17 .item {18 height: 300px;19 widows: 300px;20 background: black;21 border: 20px solid #dbdbdb;22 box-sizing: border-box;23 scroll-snap-align: center;24 }25 </style>26 </head>27 <body>28 <div class="outer">29 <div class="item"></div>30 <div class="item"></div>31 <div class="item"></div>32 <div class="item"></div>33 <div class="item"></div>34 </div>35 </body>36</html>