Aleš Sýkora / November 23, 2020 / 0 comments
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/
Fuel my passion for writing with a beer🍺
Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻