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>