分享一个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>
相关推荐
Ashley的成长之路16 小时前
NativeScript-Vue 开发指南:直接使用 Vue构建原生移动应用
前端·javascript·vue.js
衿璃16 小时前
Flutter应用架构设计的思考
前端·flutter
朕的剑还未配妥16 小时前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·vue.js
JNU freshman16 小时前
Element Plus组件
前端·vue.js·vue3
一只专注api接口开发的技术猿16 小时前
容器化与调度:使用 Docker 与 K8s 管理分布式淘宝商品数据采集任务
开发语言·前端·数据库
我有一棵树16 小时前
性能优化之前端与服务端中的 Gzip 压缩全解析
前端
魔术师卡颂16 小时前
不就写提示词?提示词工程为啥是工程?
前端·人工智能·后端
訾博ZiBo17 小时前
【Vibe Coding】001-前端界面常用布局
前端
软件技术NINI17 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
IT_陈寒17 小时前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端