{"id":6042,"date":"2021-05-17T02:00:00","date_gmt":"2021-05-17T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/scroll-horizontally-with-mouse-wheel-vanilla-java\/"},"modified":"2024-07-25T20:05:12","modified_gmt":"2024-07-25T18:05:12","slug":"scroll-horizontally-with-mouse-wheel-vanilla-java","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/scroll-horizontally-with-mouse-wheel-vanilla-java\/","title":{"rendered":"Scroll horizontally with mouse wheel: Vanilla JavaScript"},"content":{"rendered":"\n
Imagine scrolling down with the mouse-wheel or trackpad and that your page scrolls horizontally instead. Isn\u2019t that cool? In this article we will take a look at how you could use vanilla Javascript to create such an interesting effect.<\/p>\n\n\n\n
Creating some scrollable content<\/h2>\n\n\n\n
To start, we will write some HTML to set in place some content that requires some horizontal scroll.<\/p>\n\n\n
The main<\/code> element will be the scroll container. It is a going to be the element that a scrollbar is bound to as long as there is content that overflow it. As it is right now, there isn’t enough content to produce an overflow. So let\u2019s fix this.<\/p>\n\n\n\n
Making sure the content overflows<\/h2>\n\n\n\n
We will place each section aligned next to each other so the content overflows horizontally. We are trying to create something like this, where elements are overflowing the container and therefore we can create a horizontal scrollbar for them. You can have as many sections as you want.<\/p>\n\n\n\n<\/figure>\n\n\n\n
For the purpose of this demo we will make the elements full-screen. To do this, we will use viewport units like vh<\/code> and vw<\/code> to set the min-width<\/code> and min-height<\/code> properties to scale to both the edges of the screen. Then we can center the content using justify-content<\/code> and align-items<\/code>.<\/p>\n\n\n\n
We use display:flex<\/code> making the main<\/code> element the flex container. We will also be hiding the scrollbar for this demo by using overflow-x: hidden<\/code>. There\u2019s no need for this but we\u2019ll be doing it for our demo. If you decide not to hide it, make sure to change it for overflow-x: scroll<\/code>.<\/p>\n\n\n
Using the mouse wheel or trackpad to scroll horizontally<\/h2>\n\n\n\n
Here\u2019s where the fun part comes. Now we will subscribe to the mousewheel<\/code> event by attaching an event listener to our scrollable element, which in this case is the element with the tag main<\/code>.<\/p>\n\n\n\n
What does this means? It means that now we will be able to gather information through JavaScript about the scrolling event, which is exactly what we need.<\/p>\n\n\n
We need to know the direction the user is scrolling to and the amount they scrolled. So, how do we do it?<\/p>\n\n\n\n
We will be using the deltaY<\/code> property of the event object we get on the parameter (evt<\/code>).<\/p>\n\n\n\n
The wheel<\/code> event has 4 properties, and deltaY<\/code> represents the vertical scroll amount. So we will use exactly that same value to scroll the exact same amount but this time horizontally.<\/p>\n\n\n\n
We will be updating the scrollLeft<\/code> property of the scrollable container (main<\/code>) so it scrolls it horizontally.<\/p>\n\n\n
The deltaY<\/code> property can be positive ore negative. When it is positive it means the user is scrolling up and when it is negative the user is scrolling down. So, in our case, when they scroll up we want to scroll left and when they scroll down we want to scroll right.<\/p>\n\n\n\n
The scrollLeft<\/code> property works exactly with the same idea in mind. When applied to a scrollable element, a negative value means we will be scrolling the scrollable element to the left and a positive one means we will be doing it on the opposite direction, to the right. So we basically assign the deltaY<\/code> value to the scrollLeft<\/code> property and we are ready to go!<\/p>\n\n\n\n
Just one note. Do not confuse the wheel<\/code> event with the mousewheel<\/code> event, the latter of which has been deprecated.<\/p>\n\n\n\n
Take a look at the following codepen, fork it and play around with the code to see if you can build a neat horizontally scrollable layout:<\/p>\n\n\n\n
![\"elements](\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\")
<\/figure>\n\n\n\n![\"elements](\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/elements-horizontal-overflowing-demo.jpeg\")
<\/figure>\n\n\n\n