滚动在 Chrome 的叠加层中不起作用答案

【问题标题】：Scrolling doesn't work in an overlay in Chrome滚动在 Chrome 的叠加层中不起作用
【发布时间】：2012-08-15 22:56:58
【问题描述】：

我有一个由 JS 触发的叠加层，其中包含一些滚动内容。页面上还有几个嵌入的 youtube 视频。我遇到的问题是叠加层中的内容不会在 Chrome 中滚动。它在所有其他浏览器中都能正常工作。我确实在两个 youtube 视频中都添加了 wmode=opaque（也尝试了 wmode=transparent）。如果我删除这两个视频，滚动也开始在 Chrome 中工作。

谢谢

这是叠加层：

<div class="contact-overlay"><a class="close" href="#">X CLOSE</a><h3>Testimonials</h3><div class="content testimonials">
<h4 class="testimonials">See what our <span>satisfied customers</span> have to say:</h4>
<p>a lot of text</p>

样式：

.contact-overlay { position: absolute; width: 640px; height: 730px; margin-left: -320px; left: 50%; top: 50px; background: #ffffff; z-index: 500; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.contact-overlay a.close { font-family: "Arial Black", Gadget, sans-serif; color: #da3407; text-decoration: none; position: absolute; top: 5px; right: 10px; font-size: 18px; }
.contact-overlay .content { overflow: auto; height: 550px; width: 590px; margin-left: 25px; }
.contact-overlay .content.testimonials { margin-top: 30px; }

该网站正在本地开发，因此没有链接。对不起。

【问题讨论】：

尝试在 Chrome 中禁用 Flash，只是为了好玩。
它也不适用于 HTML5 视频...
请提供指向您网站的链接或在小提琴中发布您的代码。

标签： css youtube scroll overlay

【解决方案1】：

我最终使用 JS 删除了 youtube 视频，并在覆盖层被激活时将其替换为屏幕截图，然后在覆盖层关闭时将它们重新打开。

【讨论】：