页面div容器有两层大致如下页面格局 {代码...} 问题是解决页面工具区,事件冒泡,希望不通过js. 调整页面结构来解决问题

javascript - 问一个屏幕滚动的问题-Questions et réponses sur le réseau chinois PHP

communauté Apprendre Bibliothèque d'outils Loisirs

Français

javascript - 问一个屏幕滚动的问题

黄舟 2017-04-11 11:01:46

527

页面p容器有两层
大致如下页面格局

<html>
    <head>
        <style>
        /*头部和底部bar*/
        .top_bar{position:fixed;top:0px;height:40px; }
        .botton_bar{ position:fixed;button:0px;height:80px;}
        
        /*一些工具区域,这事一个点击底部bar,某个按钮弹出来的页面层,希望工具比较多的时候显示滑条
         *可惜是手机端和pc存在,滑动事件冒泡问题,下拉时center也在动
         *以及pc端出现比较恶心滑条很难看
         *想继续保持,页面内容比较多*/
        .panel{ height:100vh; overflow:scroll;  }
        
        /*正常的内容区域*/
        .center{ min-height:100000px;}
        </style>
    </head>
<body>
    <p class="container">
        <p class="top_bar"></p>
        <p class="panel">
            <ul>
                <li>.........</li>
                <li>.........</li>
                <li>.........</li>
                <li>.........</li>
            </ul>
        </p>
        
        <p class="center">
            <p>
            .....................
            </p>
            
        </p>
        <p class="botton_bar"></p>
    </p>
</body>
</html>

问题是解决页面工具区,事件冒泡,希望不通过js. 调整页面结构来解决问题