Disable scrolling on iframe until clicked?
I created a website that shows 3D CS: GO Skins
I have a problem with iframe / design
when scrolling up or down the page after you get to the iframe it will start to zoom in / out the model
currently the only way to disable the zoom feature is to stop it all together by changing the iframe source link from
to
(changing scrollwheel = 1 to scrollwheel = 0)
is there a way that I can turn off the iframe's scroll interaction until the iframe button is clicked or with a checkbox / button or something similar that could toggle it?
prefer to respond with jquery / php / html but anything that fixes it will help a ton
thank
source to share
If your iframe is a fixed size, immediately follow it with a clickable link that matches the iframe size but contains nothing. Give it a negative top edge so it floats up the top of the iframe. Then hide it as soon as it is clicked.
HTML:
<a id='clearBox' href='javascript:removeClearBox()'> </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 it's simple enough to figure out.
Your styles may differ and it is also possible to use dynamic dimension with a lot of javascript.
source to share
Try changing the iframe src after you track it down on user click.
eg.
$('body').click(function(){
$('iframe').prop('src', newUrlWithScrollwheel);
});
Also the float element above this iframe is also a significant choice, as if you clicked in the iframe this click function might not work as it is only for the parent window.
source to share
You can change the inline url request 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 in different conditions and use jQuery to update the iframe:
$('#modelviewer').attr('src', url + scroll);
source to share
For what it is worth 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;
}
source to share