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

.2&autostart=1&camera=0&waitresources=1&ui_stop=0&transparent=1&ui_related=0&scrollwheel=1

to

.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

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./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./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

• javascript
• php
• jquery
• html
• iframe

• do you still want the scroll zooming function after you click the iframe? – harrrrrrry Commented Jul 30, 2015 at 21:04
• yes please, just dont want the scroll to work on the iframe before you interact with it, if there is a way to stop it again after clicking off the iframe would be good too – RedSparr0w Commented Jul 30, 2015 at 21:12
• only thing i have found close to what i need is this but i dont want the user to have to reload the iframe each time they switch between the 2 modes if possible (also the link would not go back to the first after switching for me) – RedSparr0w Commented Jul 30, 2015 at 21:15

4 Answers 4

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.

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

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

You can change the embedded url call on the fly.

    var scroll = 1;
    var url = 'https://sketchfab./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);

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

e.g.

$('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.