如何在iOS(移动)上修复水平滚动

Question

我有一个奇怪的问题让我烦恼.我用html/css设置了一个项目,可以实现水平滚动.这适用于PC/Android但在iOS上不起作用,除非我在屏幕边缘拖动(这会将我带到上一页或下一页访问过)并再次向后拖动.这样做时,我可以完美滚动,直到滚动停止.如果我想再次滚动,我必须重复拖动手势.这就像滚动区域不会得到焦点或其他东西.尝试的片段(HTML):

<div class="scrollable">
    <div class="scrollable-content">
        <div id="tournaments-horizontal">
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
        </div>
    </div>
</div>

CSS:http: //pastebin.com/aUsQQUjm

如果有人对此有所了解,我将非常感激.再次,重复iOS的"解决方案":

1. 加载页面
2. 尝试滚动滚动区域(没有任何反应)
3. 在Safari的屏幕的任一边拖动(您将看到浏览器排队的上一页/下一页),但不要一直拖动.只需看一眼该页面,然后再拖回当前页面即可
4. 现在您可以按预期滚动(直到滚动条消失).
5. 重复步骤3-4

(搞砸了代码标签,所以我决定链接到一个pastebin).

提前致谢!

Answer 1

将其添加到您的CSS:

.scrolling-element {
    overflow-x: scroll; /* Must be 'scroll' not 'auto' */
    -webkit-overflow-scrolling: touch;
}