学习CSS Scroll Snapping与scroll-snap-align

本文介绍如何使用CSS的scroll-snap-type和scroll-snap-align属性来实现Web页面的平滑滚动效果,使页面在滚动时能够自动对齐到指定元素,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

假如有个Web页面是一块一块的,如下图所示:
在这里插入图片描述
我们希望可以一块一块的滚动,比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候,实现后一个块自动滚入或者前一个块回弹到初始位置这种效果,以前的时候用js需要写比较复杂的判断逻辑,后来有了一个css scroll snap这个方法,可以比较方便的实现想要的效果了,基本够用。

基本页面

css代码:

ul {
      max-height: 100vh;
      overflow-y: scroll;
       padding: 0;
    }
    li {
      font-size: 6vw;
      height: 30vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    li:nth-child(1) {
      background-color: rgb(255, 0, 0);
    }

    li:nth-child(2) {
      background-color: rgb(255, 128, 0);
    }

    li:nth-child(3) {
      background-color: rgb(255, 255, 0);
    }

    li:nth-child(4) {
      background-color: rgb(0, 255, 0);
    }

    li:nth-child(5) {
      background-color: rgb(0, 255, 255);
    }

    li:nth-child(6) {
      background-color: rgb(0, 0, 255);
    }

    li:nth-child(7) {
      background-color: rgb(128, 0, 255);
    }

html代码:

 <ul>
    <li>赵</li>
    <li>钱</li>
    <li>孙</li>
    <li>李</li>
    <li>周</li>
    <li>吴</li>
    <li>郑</li>
  </ul>

ul里面七个li, 背景色是赤橙黄绿青蓝紫,文字分别是赵钱孙李周吴郑。
现在的页面就是非常普通的页面,只是普通平常的滚动,还没加效果。

新属性scroll-snap-type与scroll-snap-align
1、scroll-snap-type

The scroll-snap-type property specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered. If no strictness value is specified, proximity is assumed.

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

scroll-snap-type指明了一个可以滚动的容器是否是scroll snap container , snap地是否严格() , 在哪个轴上实现snap效果。

2、scroll-snap-align

官方文档解释的好复杂,我也看不懂。

[ none | start | end | center ]

效果一

一个块被滚了一部分中途松手之后,页面自动滚回去或着自动滚到下一个块。,如下图所示:
在这里插入图片描述
这个应该算是css scroll snapping的最基本的用法了,
ul的样式中添加:

      scroll-snap-type: y mandatory;

li中添加样式:

      scroll-snap-align: start;

scroll-snap-type的属性值mandatory,使得当ul没有滚动的时候,会自动继续滚动到某个合适的li然后才停下来,
scroll-snap-align的属性值设置成了start, 看到的效果是:滚动的时候,‘赵’和‘李’都是部分出现在可视区域,但是松手后最后停留在了 “赵”,不过也可以设置成停留在下面的‘李’,就是效果二

效果二

和效果一相比的话,就是li的一个属性的变化而已。

 scroll-snap-align: end;

效果如下:
在这里插入图片描述

效果三

效果一和效果二都是一个是让滚动到可视区的第一个对齐留在可视区,另外一个是让滚动到可视区的最后一个对齐留在可视区,也可以实现让“孙”对齐,不管“赵”和‘李’会被滚出去多少。
li的样式修改为:

      scroll-snap-align: center;

这时可视区一共有5个li, ’孙‘是中间的那个。
效果如下图所示:
在这里插入图片描述

有空接着写。。。

参考文献:
https://www.w3.org/TR/css-scroll-snap-1/
https://css-tricks.com/practical-css-scroll-snapping/

### uni-app 中 `scroll-view` 组件的 `scroll-snap-type` 和 `scroll-snap-align` 用法 在 uni-app 开发中,虽然原生 HTML/CSS 提供了 `scroll-snap-type` 和 `scroll-snap-align` 属性来实现滚动吸附效果[^1],但在微信小程序或其他平台下,这些 CSS 属性可能无法直接应用于 `scroll-view` 组件。因此,在实际开发过程中需要借助一些额外的方式实现类似的滚动吸附功能。 以下是基于 uni-app 的解决方案: #### 实现方案 可以通过自定义样式以及 JavaScript 动态监听滚动事件的方式来模拟滚动吸附的效果。下面是一个完整的示例代码: ```html <template> <view class="container"> <!-- 使用 scroll-view 容器 --> <scroll-view class="scroll-container" scroll-x="true" @scroll="onScroll" :scroll-left="scrollLeft" enhanced :show-scrollbar="false" > <!-- 子项列表 --> <view v-for="(item, index) in items" :key="index" class="scroll-item" :class="'item-' + (index + 1)" > {{ item }} </view> </scroll-view> </view> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'], // 数据源 currentIndex: 0, // 当前选中的索引 scrollLeft: 0, // 控制横向滚动位置 }; }, methods: { onScroll(e) { const { detail } = e; let currentOffset = Math.round(detail.scrollLeft / this.getWindowWidth()); if (currentOffset !== this.currentIndex) { this.currentIndex = currentOffset; this.scrollToIndex(this.currentIndex); } }, scrollToIndex(index) { this.scrollLeft = index * this.getWindowWidth(); }, getWindowWidth() { return uni.getSystemInfoSync().windowWidth; // 获取窗口宽度 } }, }; </script> <style scoped> .container { width: 100%; } /* 滚动容器 */ .scroll-container { display: flex; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 单个子项 */ .scroll-item { min-width: 100vw; height: 100vh; box-sizing: border-box; text-align: center; line-height: 100vh; font-size: 24px; } .item-1 { background-color: lightblue; } .item-2 { background-color: lightgreen; } .item-3 { background-color: lightcoral; } </style> ``` #### 关键点解析 1. **`scroll-view` 配置** - 设置 `scroll-x="true"` 来允许水平方向上的滚动。 - 添加 `enhanced` 属性以增强 `scroll-view` 的性能和能力[^3]。 - 利用 `@scroll` 事件监听滚动行为并计算当前显示的内容区域。 2. **动态调整滚动位置** - 计算每次滚动的距离,并通过 `scrollLeft` 参数精确控制滚动到指定的位置。 - 结合设备屏幕宽度 (`uni.getSystemInfoSync().windowWidth`) 自适应不同分辨率下的布局需求。 3. **CSS 样式优化** - 虽然标准的 `scroll-snap-type` 和 `scroll-snap-align` 不被完全支持,但可以模仿其逻辑设计滚动体验。 - 确保每个子项占据整个视口宽高,从而达到视觉上的“吸附”效果。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值