Question

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

我遇到了iframe / design

的问题

当您到达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的答案，但任何修复它的东西都会有所帮助

由于

Answer 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来动态调整大小。

Answer 2

这里有什么值得我使用的东西：

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

Answer 3

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

e.g。

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

iframe上面的浮动元素也是一个相当大的选择，就好像你在iframe中点击一样，这个点击功能可能不起作用，因为它只适用于父窗口。

Answer 4

您可以动态更改嵌入式网址。

bool? NullableBool = chkRevLoop.IsChecked;
if(NullableBool == true)
{
}

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

    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=';

禁用在iframe上滚动，直到点击为止？

4 个答案: