Chrome App webview 和触摸滚动传播

Posted 2023-04-15

【中文标题】Chrome App webview 和触摸滚动传播

【英文标题】：Chrome App webview and touch scroll propagation

【发布时间】：2014-10-04 11:33:45

【问题描述】：

我很高兴将 Windows 8 Metro 应用替换为 Chrome 打包应用。目前，它需要模仿 Metro 应用程序的外观和感觉。主页面由多个水平排列的 webview 组成，可以进行大量的水平滚动。尝试使用触摸设备水平滚动时遇到问题。如果滚动手势在 webview 上开始，它会捕获滚动事件并阻止主机滚动。溢出隐藏在所有 web 视图中。由于它们构成了页面上的大部分内容，因此主机的有效滚动目标是有限的。

webview 内容是交互式的，因此我无法在可滚动内容上放置一个透明覆盖层来捕获事件，至少在没有某种方式将点击/触摸传播到 webview 本身时是这样。

关于如何实现这一点的任何想法？

感谢您的帮助！

【问题讨论】：

也许有人会想出什么办法，但我怀疑这是否可能。您可以尝试将各种事件处理程序附加到 webview 以查看是否可以向上传播事件。

是的，不幸的是它看起来是这样的。我已经设法让滚动与覆盖一起工作，并且能够将点击坐标发布到 webviews 以执行。它限制了 webview 内容的功能，但这只是一个开始。仍然比为 winJS 编写更有趣！

我知道这个问题很老，但根据我的经验，webviews 或具有可滚动内容的子元素滚动并停止事件传播，直到它们具有可滚动区域。并且当可滚动区域完成时，元素会将事件传播到父元素。因此，您可以在滚动事件开始时隐藏或禁用 webview 的可缩放内容，这将有助于将 scoll 事件传播到主框架。

@Elle 这是一个有害的编辑，已被回滚。 webview是一个技术术语，这里特指<webview>标签。

【参考方案1】：

我将在这里假设几件事： 为 Chrome 应用程序设置样式类似于为网页设置样式。 您当前的滚动解决方案依赖于使用 overflow:hidden 并仅使用 javascript 进行滚动。

我曾经为一个页面修复过类似的东西。这很奇怪，但我了解到对于触摸设备，除非用户与之交互，否则滚动条是不可见的。如果您将样式更改为overflow-x：滚动...将出现一个滚动条（稍后您需要使用Modernizr 或其他类似方法来处理桌面设备以检测启用触摸的设备）。然后注释掉你的滚动代码（当然是暂时的，因为你需要它来进行非触摸）。如果它随着溢出变化和 scrolipt 变化滚动正常，那么您接下来需要做的就是检测触摸并有条件地打开脚本并适当地更改溢出。

【讨论】：

还有一件事。对于某些 devoces，滚动条可能仍然可见。只需要测试。

【参考方案2】：

如果你可以使用 jQuery 来实现它，那么当光标 not 在 webviews 顶部时，它会将滚动事件应用到页面本身。