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

如果有人对此有所了解，我将非常感激。再次，重复＆＃34;解决方案＆＃34;对于iOS：

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

（搞砸了代码标签，所以我决定改为连接到pastebin）。

提前致谢！

Answer 1

将此添加到您的CSS：

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

如何修复iOS上的水平滚动（移动）

1 个答案: