Stop Horizontal Page Scrolling when the mouse pointer is inside specific elements

[jadealombro]

Hey guys!

 

I have recently been trying to learn GSAP again after a while and I am trying to implement a horizontal scrolling site.

 

So far everything is great though I am a little overwhelmed with the available options available (not saying it's a bad thing at all though )

 

I was able to make the horizontal scroll working based on a code from an example.

 

Having said that, I am a little stuck on how to implement a vertical scrolling slider that is inside the sections of the horizontal scrolling page.

 

That is because with the code I have right now, any type of scrolling will make the page scroll left and right.

 

What I wanted to do is that once the mouse is inside elements with a specific class, the horizontal scroll will stop and will run the vertical scrolling of the content inside that element instead.

 

I am thinking of setting an event listener and if the mouse if in the div, I will use the pause(). I am not sure though if that is the best way to implement this though.

 

TLDR; What I am trying to figure out are:

• Stopping the horizontal scroll when mouse is inside divs with a specific class
• Make vertical scrolling work when mouse is inside those divs

 

Any suggestion or inputs would be appreciated. Thanks in advance!  

 

-------------------------------------------------

 

It turns out, that the solution I am looking for is not that complicated at all. What I did was to simply set the `overflow-y` of the slider elements to `scroll` then hide the scrollbar through CSS.  

 

Though I would still need help in actually stopping the horizontal scroll stop happening when the mouse is inside the slider elements because right now, if I am on either the first or the last element of the slider, since there is nothing to scroll - the horizontal scroll happens.

See the Pen oNoabZd by jadebermas (@jadebermas) on CodePen

[OSUblake]

Welcome to the forums @jadealombro

 

Did you still need help? It looks like you can scroll vertically in those sections, or am I missing something?

[Cassie]

2 hours ago, jadealombro said:

Though I would still need help in actually stopping the horizontal scroll stop happening when the mouse is inside the slider elements because right now, if I am on either the first or the last element of the slider, since there is nothing to scroll - the horizontal scroll happens.

This sounds like desirable behaviour to me tbh. ^

Are you trying to disable the horizontal movement entirely when the user is hovering over the vertical sections?

 

 

[jadealombro]

13 hours ago, Cassie said:

This sounds like desirable behaviour to me tbh. ^

Are you trying to disable the horizontal movement entirely when the user is hovering over the vertical sections?

 

 

 

Hey, Cassie, yes that's right. I was able to make the vertical scrolling work and when the user points to that section, the horizontal scrolling stops. But I would like to completely disable the horizontal scrolling as long as the user is hovering over the sections that scrolls vertically.

[OSUblake]

I don't think that's really possible without getting into other methods of disabling scrolling...

https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily