I seem to have the opposite problem of everyone else with iframes and scrolling. I need the iframe (contains a youtube video) to NOT prevent scrolling of the main document. If I hover my mouse over it, the page won't scroll with the scroll wheel, and according to the latest chrome canary simulation of touch devices, I can't put my finger on the frame and scroll the main document either. Any way to stop this? My CSS is below:
我似乎与iframes和滚动的其他人有相反的问题。我需要iframe（包含youtube视频）以防止滚动主文档。如果我将鼠标悬停在它上面，页面将不会使用滚轮滚动，并且根据触摸设备的最新镀铬金丝雀模拟，我无法将手指放在框架上并滚动主文档。有办法阻止这个吗？我的CSS如下：
.GalleryVideoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
width:95%;
margin:auto;
display:block;
}
.GalleryVideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
4 个解决方案
#1
5
The question is unclear, so I went into some detail below on various ways to achieve this effect and how it works.
问题不清楚，所以我在下面详细介绍了实现这种效果的各种方法及其工作原理。
If you don't need to interact with the iframe, the quick and dirty solution is to use pointer-events: none;. This will put the iframe on the page, and not allow it to scroll. However, it also does not allow you to click on it. This obviously won't work for a YouTube video, but it is important to know this is an option.
如果您不需要与iframe交互，那么快速而肮脏的解决方案是使用pointer-events：none;。这会将iframe放在页面上，而不允许它滚动。但是，它也不允许您单击它。这显然不适用于YouTube视频，但重要的是要知道这是一个选项。
If you need to interact with the iframe, either to play a video or click a link, all you need to do is make sure the iframe is large enough to display the full contents. I'm unsure what specific problem OP was encountering as we don't have their HTML, but if you scroll and the iframe is not also trying to scroll, it will not prevent the parent from scrolling.
如果您需要与iframe交互，无论是播放视频还是点击链接，您只需要确保iframe足够大以显示完整内容。我不确定OP遇到了什么具体问题，因为我们没有他们的HTML，但如果你滚动并且iframe也没有尝试滚动，它将不会阻止父滚动。
Basically, if you have your cursor over an iframe and you scroll, the iframe will receive the event first. If it does not need to scroll (either it can't or it has already reached the bottom of the iframe) the event will be propagated to the parent.
基本上，如果您将光标放在iframe上并滚动，iframe将首先接收事件。如果它不需要滚动（它不能或它已经到达iframe的底部），则事件将传播到父级。
Finally, if you have an iframe that you need to be scrollable, but you want to scroll the parent while the cursor is on the iframe, you are out of luck. There is no way to inform the iframe that sometimes the user wants to scroll the whole page. This is simply how iframes work. You can either remove the cursor from the iframe to scroll, or scroll to the bottom of the iframe and continue down the page.
最后，如果你有一个你需要可滚动的iframe，但你想在光标在iframe上时滚动父项，那你就不走运了。无法通知iframe有时用户想要滚动整个页面。这就是iframe的工作方式。您可以从iframe中移除光标进行滚动，也可以滚动到iframe的底部并继续向下滚动页面。
Using a YouTube video and the CSS in the question, I created a demo here for you to see. I also included two identical iframes that are scrollable, and applied pointer-events: none; to one to demonstrate how it works.
在问题中使用YouTube视频和CSS，我在这里创建了一个演示供您查看。我还包括两个可滚动的相同iframe，并应用了指针事件：无;一个来证明它是如何工作的。
#2
3
I had horizontal-scrolling disabled like so:
我有横向滚动禁用，如下所示：
html, body {
overflow-x: hidden
}
On a page with an iframe, if I tried to scroll the page vertically by touching and moving the iframe on Safari for iPad or iPhone, I couldn't.
在带有iframe的页面上，如果我试图通过触摸并在Safari for iPad或iPhone上移动iframe来垂直滚动页面，我就不能。
This fixed it for me:
这为我修好了：
* {
-webkit-overflow-scrolling: touch
}
#3
1
There used to be a scrolling attribute, but it is deprecated in html5. try this:
曾经有一个滚动属性，但它在html5中已弃用。尝试这个：
iframe {
overflow: hidden;
}
Don't forget to set your width and height somewhere!
不要忘记在某处设置你的宽度和高度！
If you wanted to try the iframe scrolling attribute, you could like this:
如果你想尝试iframe滚动属性，你可能会喜欢这样：
<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe>
See working example here: http://jsfiddle.net/4dt4zhwt/1/
请参阅此处的工作示例：http：//jsfiddle.net/4dt4zhwt/1/
#4
1
I don't know if you have found a way around this, but I had the same problem where all iframes (twitter, facebook and youtube) in my site was preventing the page itself from scrolling. After a lot of debugging and coffee, I found it, in my case at least, It was down to an overflow-x: hidden hidden I had set on a form element 4/5 parents up. Removing the overflow property fixed the issue for me, Hope it works for you!
我不知道你是否找到了解决这个问题的方法，但我遇到了同样的问题，我网站上的所有iframe（twitter，facebook和youtube）都阻止了页面本身的滚动。经过大量的调试和咖啡，我发现它，至少在我的情况下，它是一个溢出-x：隐藏的隐藏我已经设置了一个表单元素4/5父母了。删除溢出属性为我解决了问题，希望它适合你！
#1
5
The question is unclear, so I went into some detail below on various ways to achieve this effect and how it works.
问题不清楚，所以我在下面详细介绍了实现这种效果的各种方法及其工作原理。
If you don't need to interact with the iframe, the quick and dirty solution is to use pointer-events: none;. This will put the iframe on the page, and not allow it to scroll. However, it also does not allow you to click on it. This obviously won't work for a YouTube video, but it is important to know this is an option.
如果您不需要与iframe交互，那么快速而肮脏的解决方案是使用pointer-events：none;。这会将iframe放在页面上，而不允许它滚动。但是，它也不允许您单击它。这显然不适用于YouTube视频，但重要的是要知道这是一个选项。
If you need to interact with the iframe, either to play a video or click a link, all you need to do is make sure the iframe is large enough to display the full contents. I'm unsure what specific problem OP was encountering as we don't have their HTML, but if you scroll and the iframe is not also trying to scroll, it will not prevent the parent from scrolling.
如果您需要与iframe交互，无论是播放视频还是点击链接，您只需要确保iframe足够大以显示完整内容。我不确定OP遇到了什么具体问题，因为我们没有他们的HTML，但如果你滚动并且iframe也没有尝试滚动，它将不会阻止父滚动。
Basically, if you have your cursor over an iframe and you scroll, the iframe will receive the event first. If it does not need to scroll (either it can't or it has already reached the bottom of the iframe) the event will be propagated to the parent.
基本上，如果您将光标放在iframe上并滚动，iframe将首先接收事件。如果它不需要滚动（它不能或它已经到达iframe的底部），则事件将传播到父级。
Finally, if you have an iframe that you need to be scrollable, but you want to scroll the parent while the cursor is on the iframe, you are out of luck. There is no way to inform the iframe that sometimes the user wants to scroll the whole page. This is simply how iframes work. You can either remove the cursor from the iframe to scroll, or scroll to the bottom of the iframe and continue down the page.
最后，如果你有一个你需要可滚动的iframe，但你想在光标在iframe上时滚动父项，那你就不走运了。无法通知iframe有时用户想要滚动整个页面。这就是iframe的工作方式。您可以从iframe中移除光标进行滚动，也可以滚动到iframe的底部并继续向下滚动页面。
Using a YouTube video and the CSS in the question, I created a demo here for you to see. I also included two identical iframes that are scrollable, and applied pointer-events: none; to one to demonstrate how it works.
在问题中使用YouTube视频和CSS，我在这里创建了一个演示供您查看。我还包括两个可滚动的相同iframe，并应用了指针事件：无;一个来证明它是如何工作的。
#2
3
I had horizontal-scrolling disabled like so:
我有横向滚动禁用，如下所示：
html, body {
overflow-x: hidden
}
On a page with an iframe, if I tried to scroll the page vertically by touching and moving the iframe on Safari for iPad or iPhone, I couldn't.
在带有iframe的页面上，如果我试图通过触摸并在Safari for iPad或iPhone上移动iframe来垂直滚动页面，我就不能。
This fixed it for me:
这为我修好了：
* {
-webkit-overflow-scrolling: touch
}
#3
1
There used to be a scrolling attribute, but it is deprecated in html5. try this:
曾经有一个滚动属性，但它在html5中已弃用。尝试这个：
iframe {
overflow: hidden;
}
Don't forget to set your width and height somewhere!
不要忘记在某处设置你的宽度和高度！
If you wanted to try the iframe scrolling attribute, you could like this:
如果你想尝试iframe滚动属性，你可能会喜欢这样：
<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe>
See working example here: http://jsfiddle.net/4dt4zhwt/1/
请参阅此处的工作示例：http：//jsfiddle.net/4dt4zhwt/1/
#4
1
I don't know if you have found a way around this, but I had the same problem where all iframes (twitter, facebook and youtube) in my site was preventing the page itself from scrolling. After a lot of debugging and coffee, I found it, in my case at least, It was down to an overflow-x: hidden hidden I had set on a form element 4/5 parents up. Removing the overflow property fixed the issue for me, Hope it works for you!
我不知道你是否找到了解决这个问题的方法，但我遇到了同样的问题，我网站上的所有iframe（twitter，facebook和youtube）都阻止了页面本身的滚动。经过大量的调试和咖啡，我发现它，至少在我的情况下，它是一个溢出-x：隐藏的隐藏我已经设置了一个表单元素4/5父母了。删除溢出属性为我解决了问题，希望它适合你！