Android 版 Chrome 浏览器不再支持 -webkit-overflow-scrolling？有替代方案吗？答案

【问题标题】：Chrome Browser for Android no longer supports -webkit-overflow-scrolling? Is there an alternative?Android 版 Chrome 浏览器不再支持 -webkit-overflow-scrolling？有替代方案吗？
【发布时间】：2013-04-01 03:39:59
【问题描述】：

我在我的 Nexus 7 平板电脑上更新到最新版本的 Android 版 Chrome 并...

-webkit-overflow-scrolling: touch

... 不再有效。此外，以下计算结果为 false：

!!('WebkitOverflowScrolling' in document.documentElement.style)

是否从最近的 Android 版 Chrome 中移除了对溢出滚动的支持？是否有我可以在最新版本中使用的等效或类似的替代动量滚动机制（不是 iScroll 等）？

同样，我在设备上的 Play 商店中搜索了 Chrome Beta，但它没有出现在搜索结果中。也许 Nexus 7 平板电脑不提供测试版？

非常感谢您对此事的任何帮助。谷歌似乎已经从他们的浏览器中删除了这个功能，这令人非常沮丧......

编辑：

详细版本信息：

运行 Android 版本 4.2.2 的 Nexus 7 平板电脑

-webkit-overflow-scrolling: touch;

和

!!('WebkitOverflowScrolling' in document.documentElement.style)

在 Chrome 版本 18.0.1025469 上运行并评估为 true
在 Chrome 版本 26.0.1410.58 上不起作用并评估为 false

【问题讨论】：

您能否提供准确的 Android 操作系统版本和准确的 Chrome for Android 版本？谢谢。
@mastDrinkNimbuPani，感谢您的回复。原始帖子经过编辑，添加了您要求的信息。
当它已经是 boolean 时，为什么还需要使用 !! 强制值...

标签： android google-chrome webkit scroll overflow

【解决方案1】：

尝试将z-index: 0 添加到带有overflow: scroll 的元素中，以创建一个堆栈上下文，为Chrome 提供使用快速滚动代码路径的提示。

背景：

我目前在更新到最新版本的 Android 版 Chrome 后遇到了这个问题。这也让我更加复杂的是，由于此更改，此功能的 current Modernizr test 现在返回 false，因此我的 CSS 样式没有被应用。

四处挖掘我发现另一个issue 讨论了对溢出滚动触摸的支持：

天人在调试 162363 时观察到 -webkit-overflow-touch 是继承的财产。所以在所有设置z-index: 0 的行为具有该属性的非隐藏元素会创建级联堆叠它下面的上下文。（这种行为，背后 ENABLE_ACCELERATED_OVERFLOW_SCROLLING，目前仅在 Android。）明显的解决方法是只设置z-index: 0 “溢出：滚动”元素。

因此，如果您遇到滚动无法按预期工作的问题，那么将 z-index: 0 添加到具有溢出的元素：滚动那么这可能会有所帮助。然而这对我不起作用，尽管滚动部分有效（在我修改 Modernizr css-overflow-scrolling 测试以针对此版本的 Chrome 返回 true 之后）滚动的动量效应不存在。

【讨论】：

z-index: 0 非常适合我。解决这个问题最困难。谢谢！
我的这个问题仍然很严重......还有其他解决方案吗？
适用于我，但如前所述，仅适用于 Android KitKat。使用 iOS 或更早的 Android 版本会导致滚动没有动力。所以不能真正用于 web 应用程序。 :(
z-index 对我不起作用。但是 -webkit-transform:translateZ(0) 成功了。这是一个严重的黑客攻击，但以防万一有人遇到这个问题。
那么模态窗口呢？我在其中，z-index 为 1002，我无法减少它。

【解决方案2】：

来自这个网址 = https://code.google.com/p/chromium/issues/detail?id=175670&q=overflow-scrolling&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

' 不，我认为这确实是由 172481 触发的。我们删除了 -webkit-overflow-scrolling，希望不再需要它，因为我们会在需要时自动选择快速滚动。问题是这里没有发生。

您提到的那些 SP 更改可能不会影响此问题，因为它们不会出现在非公司帐户上，对吧？我认为 corp 一切正常，但我会检查一下。 '

【讨论】：

感谢您的回复。我仍然不明白为什么 -webkit-overflow-scrolling 将“不再需要”。什么是“快速滚动”？我猜它只与上面链接的页面中讨论的特定上下文相关，而不是用于一般目的。所以真的没有标准 overflow: auto 功能的非插件替代品吗？因为 overflow: auto 可以预见地提供没有动量的低质量滚动。
“快速滚动”是原生加速滚动。关键是 -webkit-overflow-scrolling 没用，因为它应该是溢出的默认行为：滚动。这就是他们想要做的。

【解决方案3】：

对我有用的肮脏解决方案（需要 Hammer js）：

  Hammer($('body')[0]).on("dragup", function(ev) {
            window.scrollBy(0,ev.gesture.distance);
        });
         Hammer($('body')[0]).on("dragdown", function(ev) {
            window.scrollBy(0,-ev.gesture.distance);
        });

【讨论】：

【解决方案4】：

我们在 Chrome 40.0 上遇到滚动问题...在 Android（平板电脑和移动设备）上，我们修复了仅使用 css 的解决方案。也许它不干净但对我们有用：

    @media screen and (max-width: 1024px)
html, body {
    z-index: 0 !important;
    overflow: scroll !important;
    }
}

【讨论】：