Skip to content

Animation 动画

约 324 字大约 1 分钟

2025-05-23

全屏滚动吸附

用途:企业官网

全屏滚动吸附

1、原理解析

  1. 父容器设置样式:overflow-y: scroll;scroll-snap-type: y mandatory;
    • scroll-snap-type: 吸附轴(x/y) [吸附程度(mandatory)]
    • mandatory: 超过距离则自动滚动到下一个容器
  2. 子元素设置样式:scroll-snap-align: start;
    • 滚动容器中的一个临界点
    • start: 开始部分; end: 结束部分; center: 中间部分

2、功能实现

  • HTML 结构
<div class="container">
  <div class="page page1">
    <h1>第一页</h1>
  </div>
  <div class="page page2">
    <h1>第二页</h1>
  </div>
  <div class="page page3">
    <h1>第三页</h1>
  </div>
  <div class="page page4">
    <h1>第四页</h1>
  </div>
</div>
  • CSS 样式

豫ICP备18027433号 萌ICP备20240840号 本网站由又拍云提供CDN加速/云存储服务