• 【CSS技巧系列】解决子容器滚动引发父容器滚动问题

    背景描述

    有些时候子容器和父容器都有滚动，子容器滚动到尽头的时候父容器会触发滚动，更有甚者有可能会触发谷歌浏览器的双指回退，那么你知道该怎么解决嘛？

    解决方案

    html,body{
    overscroll-behavior:none
}

    • 1
    • 2
    • 3

    案例演示

    <html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>overscroll-behavior-x demotitle>
    <style>
        main {
            height: 500px;
            width: 3000px;
            background-color: magenta;
            background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 19px, rgba(0, 0, 0, 0.5) 20px);
        }

        main>div {
            height: 300px;
            width: 500px;
            overflow: auto;
            position: relative;
            top: 100px;
            left: 100px;
            /*核心代码*/
            overscroll-behavior-x: contain;
        }

        div>div {
            height: 100%;
            width: 1500px;
            background-color: yellow;
            background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 19px, rgba(0, 0, 0, 0.5) 20px);
        }

        p {
            padding: 10px;
            background-color: rgba(255, 0, 0, 0.5);
            margin: 0;
            width: 300px;
            position: relative;
            top: 10px;
            left: 10px;
        }
    style>
head>

<body>
    <h1>overscroll-behavior-x demoh1>
    <main>
        <div>
            <div>
                <p><code>overscroll-behavior-xcode>已经被用来使它在滚动边界时到达内框时，整个页面不会开始滚动p>
            div>
        div>
    main>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    试一下这个案例，当你在黄色区域横向滚动的时候，粉色长条区域不会随之滚动。然后请你把overscroll-behavior-x: contain;注释掉，然后在黄色区域滚动=>看看会有什么样的效果

    参考文档

    overscroll-behaviorMDN文档

  • 相关阅读:
    mysql根据mysqlbinlog恢复找回被勒索删除的数据库
    高考志愿填报：选择好专业还是好学校？
    OSDI 2021 PET 论文解读
    【无标题】
    Springboot+mybatis-plus微信支付
    Hadoop生态圈之元数据管理Atlas
    MySQL-函数
    2023江西理工大学计算机考研信息汇总
    深度神经网络是谁发明的,神经网络是谁发明的人
    Spring源码-整体架构和核心组件
  • 原文地址：https://blog.csdn.net/chengqige/article/details/126622220