How to make a div scroll horizontally and vertically simultaneously?

[Jean-francois]

Hello! 

 

I'm working on enabling a div to "pan" — that is, to scroll in both vertical and horizontal directions simultaneously. This functionality is particularly relevant for trackpad users. For a clearer understanding of what I'm aiming for, please refer to the attached demo video.

 

At present, I've managed to implement a grab feature, but the scrolling is restricted to either vertical or horizontal movement, not both.

 

I realize that overriding the default scrolling behavior might require JavaScript, considering it's the standard way these interactions are handled.

 

Despite my efforts, I've hit a roadblock. I'd greatly appreciate any guidance or assistance you can offer on this matter.

 

Thank you

 

PS: I had to add a timeout in the codepen demo to fix a weird bug so it needs a second to load.

See the Pen poBVRzM by d00td00t (@d00td00t) on CodePen

[Jean-francois]

I found the solution!

 

The way that I did it was to simply use the deltaX/deltaY of the wheel event. I can't believe that I didn't think about that sooner but it works!

 

Here's a fixed codepen for those that can stumble on this thread:

See the Pen gOyzmKr by d00td00t (@d00td00t) on CodePen

[Rodrigo]

Hi @Jean-francois and welcome to the GSAP Forums!

 

Creating something like that is not really simple but I think the best option here could be to use the Observer Plugin and the callbacks it offers such as onChangeX, onChangeY, onUp,  onDown, onLeft and onRight:

https://gsap.com/docs/v3/Plugins/Observer/

 

You beat me and found a solution, but still Observer could be helpful and you could take a look at it.

 

Anyways, is great to hear that you were able to solve it 🥳

Happy Tweening!