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

【问题标题】：ios cordova - Scrolling issue when using vertical and horizontal scrollingios cordova - 使用垂直和水平滚动时的滚动问题
【发布时间】：2019-01-25 22:03:22
【问题描述】：

我正在构建一个基于 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（使用起来有点繁琐，因为我无法阻止正文滚动）基本上如果您在触摸 ios 上的表格时尝试滚动框，则不能，但如果触摸桌子下方的线，框会正常滚动。

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

这在 android 上和在 windows 中的 chrome 上模拟时可以正常工作，但在 ios 上的 safari 或我的 cordova 应用程序中不起作用 - 如果有人能告诉我原因，那将不胜感激。

【问题讨论】：

标签： html ios css cordova safari

【解决方案1】：

将此添加到 css -webkit-overflow-scrolling: touch; 以使滚动在 Safari (ios) 中起作用。

【讨论】：