css两行代码搞定移动端swipper滑动banner效果

最新推荐文章于 2022-01-17 16:00:55 发布

原创最新推荐文章于 2022-01-17 16:00:55 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

20 篇文章

订阅专栏

这篇博客介绍了CSS Scroll Snap属性的使用，通过设置scroll-behavior、scroll-snap-type和scroll-snap-align，可以实现网页内容的平滑滚动和精确停靠效果。示例代码展示了如何创建一个颜色区块的滚动容器，当滚动时，区块会精确停靠在开始位置。

刚看了下张大神的博客，又有新发现。

原文地址：大侠，请留步，要不过来了解下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>