Scrollify icon indicating copy to clipboard operation
Scrollify copied to clipboard

Can't scroll properly on section with iframe element

Open emilianog94 opened this issue 6 years ago • 4 comments

I have a 100VH section with an iframe element inside.

When scrolling with the cursor, there is some sort of overflow on that exact section. But everything works well if you scroll with the arrows.

https://www.useloom.com/share/038734866d2d4f26957413266ae3fe17 This is the div http://emilianogioia.com.ar/wips/mooco/creative.html#reel

emilianog94 avatar Apr 29 '18 06:04 emilianog94

Hi, I may be able to find a solution

Js: $('.ClassCSS') .click(function(){ $(this).find('iframe').addClass('clicked')}) .mouseleave(function(){ $(this).find('iframe').removeClass('clicked')});

Css: .ClassCSS iframe{ display: block; width: 100%; position: relative; pointer-events: none; } .ClassCSS iframe.clicked{ pointer-events: auto; }

ghost avatar Jun 07 '18 09:06 ghost

@emilianog94 Did you ever find a solution for this bug? I'm running into the same issue now.

jtufo avatar Feb 11 '19 22:02 jtufo

Same issue!

samuel-clara avatar Mar 12 '19 16:03 samuel-clara

@kvntssr's solution worked with a few tweaks specific for my situation. Although the downside is that if you scroll on the iframe without having triggered the class removal (i.e. having kept the mouse on it at all times after clicking it), then the problem is back (albeit briefly).

Would be nice to be able to detect scroll events that affect the whole page from inside an iframe and override them with Scrollify. But don't really know enough about how Scrollify handles events to propose something.

nasif-co avatar Mar 09 '22 14:03 nasif-co