无 js 解决滚动穿透,不知道兼不兼容苹果,其他没问题

膨胀.jpg

原理是:滚动穿透是因为 2 个滚动内容在文档结构上出现嵌套,导致滚动事件传递给父级滚动内容.所以把两个滚动部分从父子关系改为并列关系即可解决问题.

大多出现滚动穿透问题的父滚动内容为 document,所以必然嵌套.

那么让 document,body 不能滚后,body 内部才能实现并列滚动元素.

用 body 内的一个 div 模拟之前的 document 或 body,承载内容,相临元素作为第二个滚动内容,即可避免滚动穿透

另外,没百度到这个解决办法,如果已存在,还是膨胀.jpg

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>滚一个试试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .mainContainer {
        width: 100%;
        height: 100%;
        overflow: scroll;
    }

    .box {
        width: 300px;
        height: 300px;
    }
    .modal{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width:300px;
        height: 100px;
        background-color:black;
        color:wheat;
        overflow: scroll;
    }
</style>

<body>
    <div class="mainContainer">
            <div class="box" style="background-color: aquamarine">
    
            </div>
            <div class="box" style="background-color:chocolate">
    
            </div>
            <div class="box" style="background-color: aquamarine">
    
            </div>
            <div class="box" style="background-color:chocolate">
    
            </div>
            <div class="box" style="background-color: aquamarine">
    
            </div>
            <div class="box" style="background-color:chocolate">
    
            </div>
            <div class="box" style="background-color: aquamarine">
    
            </div>
            <div class="box" style="background-color:chocolate">
    
            </div>
            <div class="box" style="background-color: aquamarine">
    
            </div>
            <div class="box" style="background-color:chocolate">
    
            </div>
            <div class="box" style="background-color: aquamarine">
    
            </div>
            <div class="box" style="background-color:chocolate">
    
            </div>
            <div class="box" style="background-color: aquamarine">
    
            </div>
            <div class="box" style="background-color:chocolate">
    
            </div>

    </div>
    <div class="modal">
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
        <div>rows</div>
    </div>
</body>

</html>