0

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

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

问题

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

问题

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

已尝试

  • 捕捉touchmove页面主体上的事件并调用stopPropagation()它。
  • 调用preventDefault()事件（这将完全停止任何滚动）。
  • 在事件上使用 pageXtouchmove并调用preventDefault()任何看起来是水平滑动的事件（太不可靠）。
  • 使用 CSSoverflow-x: hidden
  • jQuery Mobile 的自定义滚动事件。
  • 以上几种组合。
4

1 回答 1

0

找到了解决方案。<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，但它对我们来说是必要的。

于 2013-11-08T10:37:51.513 回答