【CSS】scroll-snap属性详解

最新推荐文章于 2024-07-12 20:49:16 发布

骑着骆驼去南极

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量807

点赞数 26

分类专栏： CSS少见属性文章标签： css 前端

本文链接：https://blog.csdn.net/m0_71975585/article/details/139422424

版权

CSS少见属性专栏收录该内容

5 篇文章 0 订阅

订阅专栏

scroll-snap-type

scroll-snap-type 属性定义滚动容器的滚动捕捉行为。

.container {
  scroll-snap-type: x mandatory; /* 水平方向捕捉，并且是强制性的 */
}

方向：

x：水平方向捕捉
y：垂直方向捕捉
both：双向捕捉

捕捉强度：

mandatory：强制捕捉，滚动会强制停留在捕捉点上
proximity：弱捕捉，滚动到接近捕捉点时会自动停留在捕捉点上
scroll-snap-align
scroll-snap-align 属性定义滚动子项在捕捉点上的对齐方式。

.item {
  scroll-snap-align: start; /* 子项的起点与捕捉点对齐 */
}

start：子项的起点与捕捉点对齐
end：子项的终点与捕捉点对齐
center：子项的中心与捕捉点对齐
none：子项不参与捕捉对齐

scroll-snap-stop

scroll-snap-stop 属性定义在滚动过程中是否强制捕捉到子项。

.item {
  scroll-snap-stop: always; /* 强制在此捕捉点停下 */
}

normal：正常捕捉行为
always：总是强制捕捉到此项，即使用户滚动得很快

scroll-padding

scroll-padding 属性定义滚动容器内的内边距，用于调整捕捉点的位置。

.container {
  scroll-padding: 20px; /* 在滚动容器内增加20px的内边距 */
}

scroll-padding-top、scroll-padding-right、scroll-padding-bottom、scroll-padding-left：分别定义四个方向的内边距

scroll-margin

scroll-margin 属性定义滚动子项的外边距，用于调整捕捉点的位置。

.item {
  scroll-margin: 10px; /* 在滚动子项周围增加10px的外边距 */
}

scroll-margin-top、scroll-margin-right、scroll-margin-bottom、scroll-margin-left：分别定义四个方向的外边距

实际使用示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Snap Example</title>
  <style>
    .container {
      display: flex;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      scroll-padding: 10px;
      border: 2px solid #ccc;
      padding: 10px;
      width: 100%;
    }

    .item {
      flex: 0 0 80%;
      margin: 0 10px;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      background-color: lightblue;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

.container:
display: flex;：使子项水平排列。
overflow-x: scroll;：启用水平滚动。
scroll-snap-type: x mandatory;：启用水平强制捕捉。
scroll-padding: 10px;：在容器内增加10px的内边距。

.item:
flex: 0 0 80%;：使每个子项占据容器的80%宽度。
margin: 0 10px;：每个子项之间有10px的间距。
scroll-snap-align: start;：每个子项的起点与捕捉点对齐。
scroll-snap-stop: always;：滚动时总是强制捕捉到此子项。

通过这些属性，可以轻松创建流畅且用户友好的滚动捕捉效果。这些属性的结合使用能够大大提升用户在图片画廊、卡片视图等界面上的体验。