使用 sroll-snap-type 优化滚动

最新推荐文章于 2024-08-26 14:00:34 发布

gtLBTNq9mr3

最新推荐文章于 2024-08-26 14:00:34 发布

阅读量417

点赞数

CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。

scroll-snap-type 这是一个实验中的功能。此功能某些浏览器尚在开发中。

scroll-snap-type CSS 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。此属性不能用来指定任何精确的动画或者物理运动效果来执行临时点，而是交给用户代理来处理。

正式语法

none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

x 滚动容器只捕捉其水平轴上的捕捉位置。

y 滚动容器只捕捉其垂直轴上的捕捉位置。

both 滚动容器会独立捕捉到其两个轴上的位置（可能会捕捉到每个轴上的不同元素）

mandatory 如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。

proximity 如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。

了解更多：https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type

光看定义有点难理解，简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。

用这个属性我们能做什么，比如 time-picker 这样的时间选择器，当每次滚动的时候都希望数字刚好停留在中间位置。

简单的demo如下：

<!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">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      display: flex;
      position: relative;
      z-index: 2;
    }
    .time {
      line-height: 24px;
      overflow: auto;
      height: 180px;
      scroll-snap-type: y mandatory;
    }
    ::-webkit-scrollbar {
      display: none;
    }
    .swap {
      display: flex;
      height: 180px;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .item {
      scroll-snap-align: center;
      height: 60px;
      line-height: 60px;
      width: 40px;
      text-align: center;
    }
    .line {
      position: absolute;
      left: 0;
      top: 60px;
      width: 100%;
      height: 60px;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      z-index: 1;
    }
</style>
</head>
<body>
  <div class="swap">
    <div class="container">
      <div class="time">
        <div class="item"></div>
        <div class="item">01</div>
        <div class="item">02</div>
        <div class="item">03</div>
        <div class="item">04</div>
        <div class="item">05</div>
        <div class="item">06</div>
        <div class="item">07</div>
        <div class="item">08</div>
        <div class="item">09</div>
        <div class="item">10</div>
        <div class="item"></div>
      </div>


      <div class="time">
        <div class="item"></div>
        <div class="item">01</div>
        <div class="item">02</div>
        <div class="item">03</div>
        <div class="item">04</div>
        <div class="item">05</div>
        <div class="item">06</div>
        <div class="item">07</div>
        <div class="item">08</div>
        <div class="item">09</div>
        <div class="item">10</div>
        <div class="item"></div>
      </div>
    </div>
    <div class="line"></div>
  </div>
</body>
</html>