css:scroll-snap实现滚动贴合

简介: css:scroll-snap实现滚动贴合

demo地址:https://mouday.github.io/front-end-demo/scroll-snap.html


css:scroll-snap实现滚动贴合


<style>
    * {
      margin: 0;
      padding: 0;
    }
    /* 父容器 */
    .contaner {
      scroll-snap-type: y mandatory;
      height: 100vh;
      overflow: scroll;
    }
    .section {
      width: 100vw;
      height: 100vh;
      scroll-snap-align: start;
    }
    .section-1 {
      background-color: #cca4e3;
    }
    .section-2 {
      background-color: #1685a9;
    }
    .section-3 {
      background-color: #4b5cc4;
    }
    .section-4 {
      background-color: #8d4bbb;
    }
  </style>
  <div class="contaner">
    <div class="section section-1">1</div>
    <div class="section section-2">2</div>
    <div class="section section-3">3</div>
    <div class="section section-4">4</div>
  </div>
目录
打赏
0
0
0
0
58
分享
相关文章
|
9天前
css3实现3D数字时钟滚动特效代码
css3实现3D数字时钟滚动特效代码
208 18
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
87 7
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
87 0
|
6月前
|
css 平滑滚动 scroll-behavior: smooth
css 平滑滚动 scroll-behavior: smooth
87 1
|
6月前
|
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
249 0
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
6天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
58 34

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等