Adobe Indesign- Web内容覆盖 - 防止滚动事件冒泡

Question

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

仅需要垂直滚动（上下），水平不需要。

问题

当用户向左或向右滑动时，杂志的页面会更改，Web内容关闭。

问题

有什么方法可以防止滚动事件从Web内容覆盖中传播到杂志上？最好是，这将是从Web内容本身（例如使用JavaScript）完成的，因为这意味着我只需要在一个地方进行编辑，而不是在每个页面上显示Web内容。

尝试

• 抓住 touchmove 页面上的事件并打电话 stopPropagation() 在上面。
• 打电话 preventDefault() 在活动中（这完全停止了任何滚动）。
• 使用pagex on touchmove 事件和呼叫 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, ， 这个很重要。 Web内容覆盖的宽度是 700px. 。设置宽度 701 意味着页面可以稍微移动。这种摆动意味着左/右滑动被捕获，并且不会渗透到Indesign上。如果它们刷滑动，则会有轻微的转变（通过像素），但与更改页面相比，这是很小的。

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

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

您可能不需要此CSS，但这对我们来说是必要的。