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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2132 天前的主题，其中的信息可能已经有所发展或是发生改变。

膨胀.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>

2 条回复 • 2019-01-15 10:02:42 +08:00

TomVista

2019-01-15 08:55:37 +08:00

可以收专利费过日子了:dog

KuroNekoFan

2019-01-15 10:02:42 +08:00

有的人有怪癖，觉得 body/document 就应该包住内容，比如我