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

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

  •  
  •   TomVista · 2019-01-14 17:33:55 +08:00 · 2149 次点击
    这是一个创建于 1109 天前的主题,其中的信息可能已经有所发展或是发生改变。

    膨胀.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
        1
    TomVista  
    OP
       2019-01-15 08:55:37 +08:00
    可以收专利费过日子了:dog
    KuroNekoFan
        2
    KuroNekoFan  
       2019-01-15 10:02:42 +08:00
    有的人有怪癖,觉得 body/document 就应该包住内容,比如我
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3679 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 09:41 · PVG 17:41 · LAX 01:41 · JFK 04:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.