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

Question

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

i am having a problem with the iframe/design

when you scroll up or down the page once you get to the iframe it starts zooming in/out on the model

currently the only way i can disable the zooming feature is by stopping it all together by changing the iframe source link from

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

to

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

(changing scrollwheel=1 to scrollwheel=0)

is there any way that i can disable iframe scrolling interaction until the iframe has been clicked on or with a check box/button or something similar that could toggle it?

prefer an answer using jquery/php/html but anything that fixes it will help a ton

Thanks

Answer 1

If your iframe is a fixed size, follow it immediately with a clickable link that fits the size of the iframe, but doesn't contain anything. Give it a negative top margin, so it moves up over top of the iframe. Then hide it once it's been clicked upon.

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

You may also need to play with z-index , depending on what's in the iframe, but that's easy enough to figure out.

Your stylings may vary, and it may also be possible to use dynamic sizing with more javascript.

Answer 2

For what it's worth here is what I use:

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

and

.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

Try to alter the iframe's src after you track on user's click.

eg

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

Also a float element above that iframe is a considerable choice too, as if you click in the iframe, this click function may not work as it is only for parent window.

Answer 4

You can change the embedded url call on the fly.

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

Then you can change the scroll variable to 0 or 1 under different curcumstances and use jQuery to update the iframe:

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