記一個ios滾動穿透問題

時間 2019-11-16

標籤一個 ios 滾動穿透問題欄目 iOS 简体版

原文原文鏈接

直接上代碼css

<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; width: 100%;background: #f7f7f7;overflow: auto;">
            <div style="background-color: red;width: 50px;height: 300px;">1</div>
            <div style="background-color: gray;width: 50px;height: 300px;">2</div>
            <div style="background-color: green;width: 50px;height: 300px;">3</div>
        </div>
    </div>

    <div id="model" style="position: fixed;bottom: 0; height: 300px;left: 0;width: 100%; background-color: gold;overflow: auto;z-index: 10;-webkit-overflow-scrolling: auto;">
        <div style="background-color: skyblue;width: 100px;height: 300px;">1</div>
        <div style="background-color: gray;width: 100px;height: 300px;">2</div>
        <div style="background-color: green;width: 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個條件
一、body或者view的-webkit-overflow-scrolling爲touch
二、model的-webkit-overflow-scrolling爲auto
當滾動model塊到底時接着滑動會出現scrollview跟隨滾動（不涉及click問題），
android上未出現這個問題jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。