Javascript 是否在iframe上禁用滚动直到单击？

我对iframe/设计有问题

当您到达iframe后向上或向下滚动页面时，它开始在模型上放大/缩小

目前，我禁用缩放功能的唯一方法是通过将iframe源链接从

到

（将滚轮=1更改为滚轮=0）

是否有任何方法可以禁用iframe滚动交互，直到单击iframe，或者使用复选框/按钮或类似的东西来切换它

更喜欢使用jquery/php/html的答案，但任何修复它的方法都会有很大帮助

---

谢谢

在用户点击后尝试更改iframe的src

e、 g

---

此外，iframe上方的浮动元素也是一个不错的选择，就像您在iframe中单击一样，此单击功能可能不起作用，因为它仅适用于父窗口。

如果您的iframe是固定大小的，请立即使用适合iframe大小但不包含任何内容的可单击链接跟随它。给它一个负的上边距，这样它就会在iframe的顶部向上移动。然后在点击后将其隐藏

HTML:

CSS:

您可能还需要使用

z-index

，具体取决于iframe中的内容，但这很容易理解

---

您的样式可能会有所不同，还可以使用更多javascript动态调整大小。

您可以动态更改嵌入的url调用

    var scroll = 1;
    var url = 'https://sketchfab.com/models/63b30614212c460fbee04d85eabd9c83/embed?autospin=0.2&autostart=1&camera=0&waitresources=1&ui_stop=0&transparent=1&ui_related=0&scrollwheel=';

然后，您可以在不同的姜黄素下将scroll变量更改为0或1，并使用jQuery更新iframe：

    $('#modelviewer').attr('src', url + scroll);

---

这里的价值在于我所使用的：

<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://google.com" width="100%" height="330px"></iframe>

---

单击iframe后是否仍需要滚动缩放功能？是的，请不要在与iframe交互之前滚动在iframe上工作，如果有办法在点击关闭iframe后再次停止，我发现唯一接近我需要的是，但我不希望用户每次在两种模式之间切换时都必须重新加载iframe（如果可能的话，链接也不会在为我切换后返回到第一个模式），而是“NewUrlWithCrollWheel”请参考允许缩放的选项？@RedSparr0w请将引号添加到您的新URL中，并将CrollWheel作为字符串。哎呀，我没有注意到我丢失了引号\=，现在可以工作了，但似乎可以重新加载大部分页面。这很好用，谢谢。有没有办法让它在单击body（不包括iframe）时删除隐藏的类？我不确定它是否会级联到iframe，但可能是

$（'body'）。单击（function（）{$（'clearBox'）。removeClass（'hidden'）；}）@redspar0w不错的网站。我喜欢你重新启用滚动的解决方案。谢谢。如果其他人需要相同的基本想法，只需在帖子中添加不同的细节，就可以添加答案。你发帖的时候我在写我的，所以我在发帖后才看到。
#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; }

    var scroll = 1;
    var url = 'https://sketchfab.com/models/63b30614212c460fbee04d85eabd9c83/embed?autospin=0.2&autostart=1&camera=0&waitresources=1&ui_stop=0&transparent=1&ui_related=0&scrollwheel=';

    $('#modelviewer').attr('src', url + scroll);

<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;
}