You can't scroll when your mouse is over an iframe

[nickchartier11]

Hello 👋

Describe the bug You can't scroll when your mouse is over an iframe

To Reproduce Steps to reproduce the behavior:

1. Embed a youtube iframe
2. Try to scroll when your mouse is over it

Expected behavior You should be able to scroll even if your mouse is over an iframe

Desktop (please complete the following information): MacOS 10.15.7 with Chrome Version 87.0.4280.88 (Build officiel) (x86_64)

Thank you 👊

[19h47]

Hello @nickchartier11!

Unfortunately, there is no mousewheel event propagation on iframe

What you can do it's add an overlay over the iframe and handle the click event to play/pause the video.

See #19

[coderesolution]

Hi, I just wanted to check - is this still the only viable solutions here? @19h47

[19h47]

Hello @coderesolution, I'm afraid yes.

The reason why you can't capture event on iframe is because event is design to bubble into a tree and iframe is a separate tree @see

[coderesolution]

Hey @19h47, I see, thank you for the prompt confirmation.

I guess videos have easy workarounds (custom play buttons), but I am working on a singer/artist website which requires iFrames for Spotify, Apple Music, Amazon Music, etc. so as you can imagine these need full interaction. I wondered if you have any suggestions for workarounds (without sacrificing Locomotive, obviously).

Appreciate your input, thanks again!

[19h47]

@coderesolution I can imagine the frustration. Maybe disable smooth scroll on this particular page?

[coderesolution]

Thanks, @19h47, we will weigh up the options! Appreciate your time.

[Dushyant1295]

in some cases where our video is on autoplay and on loop we can use pointer-events: none

iframe{
  pointer-events:none;
}

[migueltrias]

Has anyone come up with a more usable solution than just disabling pointer events?

It happens with many iframes like google maps, youtube and vimeo videos, 3d configurator embeds, etc... I happen to have a website fully populated of these frames and the experience is awful, turning a transform-based scroll pretty much useless... :/

Edit: just to share my temporary solution with you, I'm disabling pointer events to all iframes when the has-scroll-scrolling class is present. This way it doesn't interrupt a scrolling behaviour unless the user has stopped in the iframe and the scroll has stopped, then the problem arises again.

[elliottmangham]

It's far from perfect, but @migueltrias's solution is a huge improvement, so thank you!

[Sandstedt]

Added a little UX thingy to @migueltrias's answer. On all your iframe's parent elements, add the class .iframe-parent and then add this CSS to your page, and the cursor will change to a spinner while we wait for the scrolling to stop:

.has-scroll-scrolling iframe {
  pointer-events: none;
}
.has-scroll-scrolling .iframe-parent {
  cursor: wait;
}

Note: With Miguel's method you can't start scrolling when hover over an iframe, so not a perfect answer to this problem.

[krzysztofGwozdz]

@Sandstedt @migueltrias @nickchartier11 If you want be able to scroll while hovering over the iframe simply add invisible pseudoelement to the iframe-parent.

.iframe-parent {
     position: relative;

     &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
 }

There is no need to add pointer-events: none; to the iframe element.

[curtismccaw]

Hi there, i'm experiencing this issue. How can we resolve it? None of the suggestions above fix it. Seems to be when the user lands in the middle of a full screen iframe they're unable to scroll regardless of what we do.

[krzysztofGwozdz]

@curtismccaw my solution works well for me. Try to add invisible pseudo element to the iframe parent and make sure is at the top of the iframe (play with z-index if needed).

[sushanyadav]

@Sandstedt @migueltrias @nickchartier11 If you want be able to scroll while hovering over the iframe simply add invisible pseudoelement to the iframe-parent.

.iframe-parent {
     position: relative;

     &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
 }

There is no need to add pointer-events: none; to the iframe element.

Thank you @krzysztofGwozdz .This solution worked for me. I was experiencing issues in Safari, but now it works well. 👍

[migueltrias]

@Sandstedt @migueltrias @nickchartier11 If you want be able to scroll while hovering over the iframe simply add invisible pseudoelement to the iframe-parent.

.iframe-parent {
     position: relative;

     &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
 }

There is no need to add pointer-events: none; to the iframe element.

Hi, While this solution allows for scrolling if the mouse is over an iframe, it renders its below elements useless as the :before layer will still remain on top. So, I wouldn't say the issue is resolved :/

[krzysztofGwozdz]

Hi, While this solution allows for scrolling if the mouse is over an iframe, it renders its below elements useless as the :before layer will still remain on top. So, I wouldn't say the issue is resolved :/

Hey, You can't eat cake and have cake :)

If you are referring to video controls that you can't use, I encourage you to create custom playback controls.

[migueltrias]

Hi, While this solution allows for scrolling if the mouse is over an iframe, it renders its below elements useless as the :before layer will still remain on top. So, I wouldn't say the issue is resolved :/

Hey, You can't eat cake and have cake :)

If you are referring to video controls that you can't use, I encourage you to create custom playback controls.

For video yes, that's the solution right now. But for more complex embeds, this is still a huge problem (i.e. product configurators from third parties, interactive catalogues, etc.).

[devshum]

@Sandstedt @migueltrias @nickchartier11 If you want be able to scroll while hovering over the iframe simply add invisible pseudoelement to the iframe-parent.

.iframe-parent {
     position: relative;

     &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
 }

There is no need to add pointer-events: none; to the iframe element.

Thanks, works well

[Voltra]

Just to clarify for future references: thus far it's not possible to scroll over an iframe smoothly without compromising pointer events propagation, starting stationary or already scrolling.