Adobe InDesign - Web内容叠加 - 防止滚动事件冒泡

Question

我有一个InDesign杂志，其中包含一个Web内容覆盖（指向响应式网站）。除了滚动之外，一切都很好。

只需垂直滚动（向上和向下），水平不滚动。

问题

当用户向左或向右滑动时，杂志的页面会发生变化，网页内容会关闭。

问题

有什么方法可以阻止滚动事件从网页内容叠加层传播到杂志？优选地，这将通过网络内容本身（例如使用JavaScript）来完成，因为这意味着我只需要在一个地方进行编辑，而不是在每个页面上显示网络内容。

尝试

• 在页面正文上捕获touchmove个事件并在其上调用stopPropagation()。
• 在事件上调用preventDefault()（这会停止任何滚动）。
• 在touchmove个事件上使用pageX，并在任何看似水平滑动（太不可靠）的事件上调用preventDefault()。
• 使用CSS overflow-x: hidden
• jQuery Mobile的自定义滚动事件。
• 以上几种组合。

Answer 1

找到解决方案。首先，在头部插入<meta> viewport标记：

<meta name="viewport" content="width=701, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no" />

请注意，我设置的静态宽度为701，这很重要。网络内容叠加层的宽度为700px。设置宽度701意味着页面可以轻微移动。这种摆动意味着左/右滑动被捕获并且不会渗透到InDesign。如果他们进行滑动，则会有轻微的移动（按像素），但与更改页面相比，它会很小。

接下来，将以下CSS添加到您的内容中：

.content {
    -webkit-overflow-scrolling: touch
}

你可能不需要这个CSS，但它对我们来说是必要的。