首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
V2EX  ›  JavaScript

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

  •  
  •   TomVista · 327 天前 · 864 次点击
    这是一个创建于 327 天前的主题,其中的信息可能已经有所发展或是发生改变。

    膨胀.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
        1
    TomVista   326 天前
    可以收专利费过日子了:dog
        2
    KuroNekoFan   326 天前
    有的人有怪癖,觉得 body/document 就应该包住内容,比如我
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2318 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 29ms · UTC 13:58 · PVG 21:58 · LAX 05:58 · JFK 08:58
    ♥ Do have faith in what you're doing.