通过 iframe 中的触摸禁用水平滚动答案

【问题标题】：Disabling horizontal scroll via touch in an iframe通过 iframe 中的触摸禁用水平滚动
【发布时间】：2020-01-21 17:13:58
【问题描述】：

我在网站上有一个 iframe，我想禁用水平（不是垂直）滚动，特别是当用户在网站上激活触摸输入并水平拖动时（也就是说，如果滚动条仍然通过直接触摸它们可见和可拖动）。不幸的是，我无法控制 iframe 中显示的网站。

我环顾了这个网站，似乎真的很难或不可能。我试过了：

我将主要使用触摸控件在大型显示器上控制此 iframe，如果它仅适用于触摸也没关系（有没有办法我可以手动覆盖某种触摸事件并检测它们是否试图水平滚动iframe？）。我只需要支持最新版本的 Chrome。

【问题讨论】：

【解决方案1】：

如果没有链接，将很难检查，但也许您可以查看 CSS pointer-events: none; 或任何其他指针事件。

【讨论】：

【解决方案2】：

可能可以单独禁用某些触摸事件，但如果不进行一些技巧，您将无法阻止在单个轴上的 iframe 中滚动。 scrolling=no 属性在 HTML5 中已弃用。

最好的办法就是简单的设置iframe的宽度

【讨论】：

我们目前确实捕获了整个可见网站，但不幸的是，我们正在 iframe-ing 的网站在背景某处有一个不可见的 HTML 元素，它人为地将页面水平推出并导致出现滚动条。我原则上同意您的解决方案，但在这种情况下，如果不使我们的 iframe 非常宽并导致大量空白问题，它将对我们不起作用。