Disable scrolling in Iframe when scrolling page

min read / WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: Disable scroll until you click into iframe.

SITUATION: I am using iframe for 3D room tour. When I hover mouse over it when scrolling page up and down, it starts to zoom in and out. So I want to enable it only when user clicks inside the iframe once. I am using it in Oxygen Builder so there is a tutorial for it.

What I need? I need to put transparent div over mine iframe. So I add my iframe into Code block HTML

<iframe src="https://tourmkr.com/F1VrjTJAiq" name="willowdent-virtualniprohlidka" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowfullscreen></iframe>

I need to wrap it into a div:

<div class="roomtour">
<iframe src="https://tourmkr.com/F1VrjTJAiq" name="willowdent-virtualniprohlidka" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowfullscreen></iframe>
</div>

And add some CSS in Code block CSS

/*Overlay block*/
.roomtour {
width: 100%;
}
/*Iframe itself*/
.roomtour iframe {
width: 100%;
 /*I have fullwidth iframe. You can use width in pixels too.*/
display: block;
position: relative;
pointer-events: none;
 /*Disable actions with mouse completely*/
}
.roomtour iframe.clicked {
pointer-events: auto;
 /*Enable mouse actions again*/
}

And JS in Code block JS

jQuery('.roomtour')
 //you can add your own selector
.click(function(){
 //apply function when click on iframe
jQuery(this).find('iframe').addClass('clicked')})
 //apply class clicked
.mouseleave(function(){
 //apply when mouse leave the iframe
jQuery(this).find('iframe').removeClass('clicked')}); //remove class clicked

You can see the iframe here: https://www.willowdent.cz/zubni-hygiena-praha-5/

0 comments