html - ios cordova - 使用垂直和水平滚动时的滚动问题

Question

我正在构建一个基于 Cordova 的应用程序，到目前为止一切顺利，但我在 iOS 上遇到了滚动问题。

基本上，我在一个水平滚动的 div 中有一个表格，我有页面的其余部分，由一个应该垂直滚动的父 div 组成 - 这一切都有效，除非你尝试在触摸表格的同时滚动主页在 iOS 上。

<div class="example_container" style="height:220px;width:200px;">
    <div class="example_slide" id="example_slide_1" style="text-align:center;height:100%;overflow:auto;">
        <div style="width:80%;margin:auto;overflow-x:scroll;">
            <table>{table content}</table>
        </div>
    </div>
</div>

我做了一个 fiddle (使用起来有点麻烦，因为我无法阻止 body 滚动)本质上，如果您尝试在触摸 ios 上的表格时滚动框，则不能，但是如果您触摸表格下方的线，框正常滚动。

我认为这是因为它试图滚动 body 或 html 但我已经尝试阻止它们滚动 position:fixed;和溢出:隐藏；结果相同。

这在 android 上和在 windows 中的 chrome 上模拟时按预期工作，但在 ios 上的 safari 或我的 cordova 应用程序中不起作用 - 如果有人能告诉我为什么，那将不胜感激。

Answer 1

将此添加到 css -webkit-overflow-scrolling: touch; 中，使滚动在 Safari (ios) 中正常工作。