在点击之前禁用 iframe 上的滚动？

Posted 2023-03-05

【中文标题】在点击之前禁用 iframe 上的滚动？

【英文标题】：disable scroll on iframe until clicked on?

【发布时间】：2015-10-22 09:50:56

【问题描述】：

I have made a website that shows 3D CS:GO Skins

我的 iframe/设计有问题

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

目前我可以禁用缩放功能的唯一方法是通过更改 iframe 源链接来将其全部停止

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

到

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

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

有什么方法可以禁用 iframe 滚动交互，直到点击 iframe 或使用复选框/按钮或类似的东西可以切换它？

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

谢谢

【问题讨论】：

点击iframe后还想要滚动缩放功能吗？

是的，请在与 iframe 交互之前不希望滚动在 iframe 上工作，如果有办法在单击 iframe 后再次停止它也会很好

我发现唯一接近我需要的是this，但我不希望用户每次在两种模式之间切换时都必须重新加载 iframe（如果可能的话，链接也不会给我切换后回到第一个）

【参考方案1】：

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

HTML：

<a id='clearBox' href='javascript:removeClearBox()'>&nbsp;</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 使用动态调整大小。

【讨论】：

这很好用，谢谢。有没有办法让它在点击正文（不包括 iframe）时删除隐藏的类？

我不确定它是否会级联到 iframe，但可能是$('body').click(function()$('#clearBox').removeClass('hidden'););

@RedSparr0w 不错的网站。我喜欢你重新启用滚动的解决方案。

谢谢。如果需要，将添加为其他人回答

【参考方案2】：

因为这里的价值就是我使用的：

<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://google.com"  ></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;

【参考方案3】：

您可以随时更改嵌入的 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=';

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

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

【讨论】：

基本思路相同，只是帖子中的细节不同。我在你发帖的时候写我的，所以直到我发帖后我才看到。

【参考方案4】：

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

例如

$('body').click(function()
    $('iframe').prop('src', newUrlWithScrollwheel);
);

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

【讨论】：

“newurlwithscrollwheel”是指允许缩放的那个吗？

@RedSparr0w 请将引号作为字符串添加到您的 newUrlWithScrollwheel。

哎呀，没注意到我错过了它们\=，现在可以使用，但似乎重新加载了大部分页面