禁用在iframe上滚动直到点击？
禁用在iframe上滚动直到点击？
提问于 2015-07-30 12:59:58
我对iframe/设计有问题。
在到达iframe后，当您向上或向下滚动页面时，它开始在模型上放大/缩小。
当前，禁用缩放功能的唯一方法是通过将iframe源链接更改为
至
(将scrollwheel=1更改为scrollwheel=0)
是否有任何方法可以禁用iframe滚动交互，直到iframe被单击，或使用复选框/按钮或类似的东西可以切换它？
更喜欢使用jquery/php/html的答案，但是任何修复它的方法都会有帮助。
谢谢
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-07-30 13:24:22
如果您的iframe是一个固定的大小，请立即使用符合iframe大小的可点击链接，但不包含任何内容。给它一个负的上缘，这样它就会向上移动到iframe顶部。一旦它被点击就把它藏起来。
HTML：
<a id='clearBox' href='javascript:removeClearBox()'> </a>Javascript：
function removeClearBox() {
$('#clearBox').addClass('hidden');
}CSS：
#clearBox {
width: [iframe width]px;
height: [iframe height]px;
display: block;
margin-top: -[iframe height]px;
text-decoration: none;
}
/*in case you don't have a .hidden class:*/
.hidden { display: none; }您可能还需要使用z-index，这取决于iframe中的内容，但这很容易理解。
您的样式可能会有所不同，也可能使用带有更多javascript的动态调整。
Stack Overflow用户
发布于 2017-08-29 23:08:02
因为这里值得我用的是：
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://google.com" width="100%" height="330px"></iframe>和
.overlay {
background:transparent;
position:relative;
z-index:1000;
width:100%;
height:330px; /* your iframe height */
top:330px; /* your iframe height */
margin-top:-330px; /* your iframe height */
cursor:pointer;
}Stack Overflow用户
发布于 2015-07-30 13:16:05
在跟踪用户单击后，尝试更改iframe的src。
例如：
$('body').click(function(){
$('iframe').prop('src', newUrlWithScrollwheel);
});此外，上面的浮点元素iframe也是一个相当大的选择，就好像您在iframe中单击一样，这个单击函数可能无法工作，因为它只适用于父窗口。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31733931
复制相关文章
相似问题
腾讯云开发者
