分享一个css的吸附效果scroll-snap-type

html 复制代码
<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        
    </title>
   
    <meta charset="UTF-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />


 
</head>
<style>
    .box{
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: fixed;
        overflow-y: scroll;
        /* scroll-snap-type: y mandatory; */
        scroll-snap-type: y proximity;
    }
    .item{
        position: relative;
        min-height: 100vh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
</style>
<body>
    <div class="box">
        <div class="item" style="background-color: black;"></div>
        <div class="item" style="background-color: #e0e0e0;height: 150vh;"><p style="position: absolute;top: 0;">头部文字</p><p style="position: absolute;bottom: 0;">底部文字</p></div>
        <div class="item" style="background-color: #999999;height: 120vh;"></div>
    </div>
</body>

</html>
相关推荐
小妖怪的夏天几秒前
electron 打包web页面解决跨域问题
前端·javascript·electron
骚饼8 分钟前
Git 命令配置别名、Git命令缩写(Mac版)
前端·git
LoveEate19 分钟前
vue3 el-switch表单联动校验
前端·javascript·vue.js
z_y_j22997043824 分钟前
服务器中更新前端项目
服务器·前端
2301_7976042430 分钟前
d40: vue杂项问题
前端·javascript·vue.js
Mintopia1 小时前
领域适配 AIGC:垂直行业 Web 应用的微调技术实践
前端·javascript·aigc
Mintopia1 小时前
Next.js 内置后端能力扩展 —— 重定向与路由保护
前端·javascript·next.js
IT_陈寒1 小时前
Python 3.12 性能暴增50%!这5个新特性让老项目直接起飞
前端·人工智能·后端
excel1 小时前
JavaScript 中的对象池:复用对象的高效方案
前端
excel2 小时前
Vue实例挂载的过程中发生了什么
前端