Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

iframe scroll issue

surajitk1518267
Level 1
Level 1

We need to add a iframe in the page and inside iframe we are calling a website which has functionality to zoom in & out.

But as soon we try to zoom in / out using mouse scroll inside iframe, main page start scrolling.

We tried to add the functionality of scrolling="no" but it doesn't work.

We have only below options to edit

Kindly suggest.

iframe called is https://kiger.renault.co.in/#/car/360/kiger

Functionality where it was not working is https://www.renault.co.in/cars/renault-kiger.html

iframe AEM.jpg

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@surajitk1518267,

if the AEM out of the box iframe component is causing too many issues, I suggest that you would create your own iframe component. 

Example code I found online looks helpful, https://stackoverflow.com/questions/39398787/stop-scrolling-on-zoomable-iframe

 

View solution in original post

2 Replies
Ritesh_M
Community Advisor
Community Advisor
 
 

Hi @surajitk1518267 ,

 

You can lock the scroll when user clicks inside div containing  iframe and the same can be unlocked when user clicks outside of iframe div. I think that should help you (assuming scroll lock will not lock iframe contained website). Please see below example -

 

https://stackoverflow.com/questions/21315306/how-to-stop-window-scroll-after-specific-event/21315466

 

lock-scroll.png

BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@surajitk1518267,

if the AEM out of the box iframe component is causing too many issues, I suggest that you would create your own iframe component. 

Example code I found online looks helpful, https://stackoverflow.com/questions/39398787/stop-scrolling-on-zoomable-iframe

 

View solution in original post