zoukankan      html  css  js  c++  java
  • 记一个ios滚动穿透问题

    直接上代码

    <body style="overflow: hidden;-webkit-overflow-scrolling: touch;">
    
        <div id="view" style="position: relative;">
            <div id="scrollview" style="position: absolute;top: 0;bottom: 0;left: 0;  100%;background: #f7f7f7;overflow: auto;">
                <div style="background-color: red; 50px;height: 300px;">1</div>
                <div style="background-color: gray; 50px;height: 300px;">2</div>
                <div style="background-color: green; 50px;height: 300px;">3</div>
            </div>
        </div>
    
        <div id="model" style="position: fixed;bottom: 0; height: 300px;left: 0; 100%; background-color: gold;overflow: auto;z-index: 10;-webkit-overflow-scrolling: auto;">
            <div style="background-color: skyblue; 100px;height: 300px;">1</div>
            <div style="background-color: gray; 100px;height: 300px;">2</div>
            <div style="background-color: green; 100px;height: 300px;">3</div>
        </div>
    
    </body>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $('#view').height($(window).height());
    </script>

    复现2个条件
    1、body或者view的-webkit-overflow-scrolling为touch
    2、model的-webkit-overflow-scrolling为auto
    当滚动model块到底时接着滑动会出现scrollview跟随滚动(不涉及click问题),
    android上未出现这个问题

  • 相关阅读:
    解决跨域之服务器代理http-proxy-middleware模块
    npm、yarn、nrm包管理工具
    nodeJS基础
    gulp自动化构建工具应用
    六种继承方式
    七种去重的方法
    初识模块化
    针对PHP网站攻击的几种方式
    oracle备份恢复(dmp文件)
    nginx.conf中文详解
  • 原文地址:https://www.cnblogs.com/10manongit/p/12827650.html
Copyright © 2011-2022 走看看