Adsense 广告在移动设备上打破滚动（切断内容）

Question

我们遇到了 Adsense 广告干扰页面内容滚动行为的问题，特别是在移动设备上。当您在广告上点击（并按住）手指时，它实际上并没有向上或向下滚动页面，而是简单地向上移动屏幕并将其上方的所有其他内容切掉。如果您点击（并按住）并拖动任何不是广告的内容，页面就会滚动正常。

我已链接到以下问题的视频。

Video of scroll behavior issue

这是 JSX 中的标记（我们正在使用 React）：

<div className="resultsAdContainer">
    <div className="resultsAd" style={{display: 'inline-block', margin: '25px auto 25px auto'}}>
        <ins className="adsbygoogle" style={{display: "block"}} data-ad-client={this.props.dataAdClient} data-ad-slot={this.props.dataAdSlot} data-ad-format="auto"></ins>
    </div>
</div>

这是 CSS 选择器：

.resultsAdContainer {
    display: flex;
    justify-content: center;
}
.resultsAd {
    display: inline-block;
    width: 100%;
}

我尝试了touch-action: none，还尝试为touchmove 和touchstart 添加事件侦听器，并在容器DIV 上触发事件时调用.preventDefault()。

我发现唯一可行的方法是在 resultsAd 类上添加 pointer-events: none。麻烦的是，这也会禁用点击广告，这显然是不行的。我稍后尝试使用 Javascript 将 pointer-events: auto 添加回 iframe 标记，但这只会将所有内容重置为最初描述的相同行为。

任何想法如何阻止这种“切断”行为？

Answer 1

我知道这是死灵术，但我只是将其分享给遇到同样问题的任何人。我决定改用多路复用。它实际上让我滚动之后。如果有帮助，我会在 Material UI FullScreen Dialog 中使用它。