Chrome浏览器不再支持-webkit-overflow-scrolling在Android上使用？有替代方法吗？

Question

Chrome浏览器不再支持-webkit-overflow-scrolling在Android上使用？有替代方法吗？

androidgoogle-chromewebkitscrolloverflow

24

我在我的Nexus 7平板电脑上更新了Chrome for Android的最新版本，然后...

-webkit-overflow-scrolling: touch

...不再起作用。此外，以下内容的计算结果为false：

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

近期版本的Chrome for Android移除了对溢出滚动的支持吗？是否有一种等效或类似的惯性滚动机制（而不是iScroll等）可以在最新版本中使用？

此外，我在我的设备上在Play商店中搜索Chrome Beta，并没有在搜索结果中出现。也许beta版本不适用于Nexus 7平板电脑？

非常感谢任何关于这个问题的帮助。让人沮丧的是Google似乎从他们的浏览器中删除了这个功能....

编辑：

详细版本信息：

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

-webkit-overflow-scrolling: touch;

和

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

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

- user2262484

请您提供确切的Android操作系统版本和Chrome for Android版本，谢谢。 - mastDrinkNimbuPani

@ mastDrinkNimbuPani，谢谢您的回复。原帖已经编辑并添加了您要求的信息。 - user2262484

当变量已经是布尔类型时，为什么需要使用 !! 强制转换值？ - Shikkediel

4个回答

8

从这个网址 = 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更改可能不会影响此问题，因为它们不会显示在非公司帐户上，对吧？我认为在公司方面一切都正常，但我会检查一下。 '

- mastDrinkNimbuPani

1

感谢回复。我仍然不明白为什么-webkit-overflow-scrolling会“不再必要”。什么是“快速滚动”？我猜它只与上面链接页面中讨论的特定上下文相关，而不适用于一般目的。所以，真的没有非插件替代标准overflow: auto功能的方法吗？因为overflow: auto会产生低质量的滚动效果，没有动量。 - user2262484

1

“快速滚动”是本地加速滚动。问题在于，-webkit-overflow-scrolling 是无用的，因为它应该是 overflow: scroll 的默认行为。这就是他们想要做的。 - adriendenat

-1

我们在Chrome 40.0上的Android（平板电脑和手机）上遇到了滚动问题，但我们通过仅使用CSS解决方案进行了修复。也许这不是很干净的解决方案，但对我们来说有效：

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

- Gir . Cat

-1

一个对我有效的不太优雅的解决方案（需要 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);
        });

- Hugo Zapata

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SneakyBrian · Accepted Answer

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

背景：

我最近更新了Android版Chrome后遇到了这个问题。由于这种变化，当前Modernizr测试此功能现在返回false，因此我的CSS样式未被应用。

挖掘后，我发现另一个问题讨论了触摸溢出滚动的支持。

Tien-Ren在调试162363时发现-webkit-overflow-touch是一个继承属性。因此，对所有具有该属性且非隐藏元素设置z-index:0的行为会在其下创建一系列堆叠上下文。(ENABLE_ACCELERATED_OVERFLOW_SCROLLING背后的这种行为目前仅在Android上启用。)明显的解决方法是仅对"overflow:scroll"元素设置z-index:0。

因此，如果您遇到滚动不按预期工作的问题，则将z-index:0添加到具有overflow:scroll的元素中可能会有所帮助。但是，对我来说，这并没有起作用，尽管滚动部分起作用(在我修改了Modernizr css-overflow-scrolling测试以返回此版本的Chrome的true之后)，但滚动的动量效果不存在。