页面滚动停靠

例子

brown

blueviolet

blue

aqua

burlywood

<template>
  <div class="container">
    <div v-for="color in colors" :key="color" class="box" :style="{ backgroundColor: color }">
      <span :style="{ color, filter: 'invert(1)' }">
        {{ color }}
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
const colors = ['brown', 'blueviolet', 'blue', 'aqua', 'burlywood']
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden auto;
  height: 375px;
  scroll-snap-type: y mandatory;
  transform: translateZ(0);
  .box {
    height: 375px;
    width: 100%;
    scroll-snap-align: center;
    display: grid;
    place-items: center;
    font-size: 5rem;
  }
}
</style>

以前要实现页面滚动停靠效果需要借助 js 来操作 dom，类似于fullpage.js插件，现在纯 css 也能做到同样的事。

scroll-snap-type

scroll-snap-type 属性定义元素容器的滚动方式。该属性不能作用于body标签（我用的时候不可用）。

属性

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

• x：x 轴；
• y：y 轴；
• both：x 轴 与 y 轴
• mandatory：可选，强制滚动，只要发生滚动就滚到下一页；
• proximity：可选，协商滚动，滚动大半才滚动到下一页，否则留在当前滚动点或回滚当前页（不怎么好使）。

scroll-snap-align

scroll-snap-align属性指定元素相对容器的滚动方向对齐方式。可以作用于容器子孙元素。

属性

• start：头部对齐；
• center：居中对齐；
• end：尾部对齐。

注意事项

目前还是一个实验的属性。

以上代码在移动表现良好，在桌面端滑动略有卡顿感，需要在容器添加 transform: translateZ(0) 属性，开启 css3 硬件加速。