IOS -webkit-overflow-scrolling 在错误的轴上滚动，或者根本不滚动 [英] IOS -webkit-overflow-scrolling scrolls on wrong axis, or not at all

问题描述

我正在使用 html5 为 IOS 构建一个移动应用程序.我正在使用-webkit-overflow-scrolling: touch"来获得本机惯性滚动，但它非常有问题.我已经解决了在滚动停止之前内容不呈现的问题，但一个持续存在的错误是:

I'm building a mobile app for IOS, with html5. I'm using "-webkit-overflow-scrolling: touch" to get the native inertia scrolling, but it's very buggy. I've solved the issues with content not rendering until the scrolling stops, but one persistent bug is this:

当我尝试上下滚动时，没有任何反应，但是当我尝试水平滚动时，内容会垂直滚动(离轴 90 度).如果我浏览我的应用程序并返回页面，它有时会被修复.此外，有时它根本不会滚动，尽管内容很丰富.

When I try to scroll up and down, nothing happens, but when I try to scroll horizontally, the content scrolls vertically (90 degrees off axis). If I navigate around my app and come back to the page, it will sometimes be fixed. Also, sometimes it won't scroll at all, despite being full of content.

从我在 google 上搜索的内容来看，共识似乎是 Apple 意识到了这个错误，并且不打算很快修复它.有没有人找到让 -webkit-overflow-scrolling 正常工作的解决方案?

From what I've googled, the consensus seems to be that Apple is aware of this bug, and has no intention of fixing it any time soon. Has anyone found a solution to get -webkit-overflow-scrolling to work correctly?

推荐答案

几个月来我也一直在为这个错误而苦苦挣扎.我发现的最佳特征是:

I also have struggled with this bug for months. The best characterization that I've found is:

https://bugs.webkit.org/show_bug.cgi?id=87391

表示当页面具有 iFrame 并且内容是从 Javascript 设置时会发生这种情况.我目前在 The Graphics Codex version 1.6 中的解决方法是使用 iScroll4 显式滚动页面而不是而不是使用触摸滚动.由于 Javascript 是单线程的，如果您还要执行动画或后台加载内容，这可能会很慢.

which says that it happens when the page has an iFrame and the contents are set from Javascript. My current workaround in The Graphics Codex version 1.6 is to use iScroll4 to explicitly scroll the page rather than using touch scrolling. Because Javascript is single-threaded, this can be slow if you're also performing animations or background loading content.

这篇关于IOS -webkit-overflow-scrolling 在错误的轴上滚动，或者根本不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！