â–Ľ
Streaming live at 10am (PST)

Horizontal Scroll on mouse scroll/hover & Mobile swipe left to right

Hey There,

I am looking to create a section on my website that allows users to scroll through horizontally only when their mouse is hovering over the section and/or when they swipe on the specific section in mobile. Below is a gif of what I would like it to do. All examples that I have been able to find on forums and tutorials make the horizontal scroll sticky to the page until the user has completely scrolled through the list. I would like the user to be able to scroll past the section vertically if they do not want to review the whole collection of items.

I DO NOT want to replicate these:


I want the section to be interactive on its own and not require the user to complete scroll through it if they don’t want to. Netflix’s website is a similar example, Here is a tutorial I found explaining how to do it with CSS:
https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585

Thanks!


Here is my public share link: [LINK][1]

**Keep in mind it is my first site and a huge work in progress. I have a lot of other aspects to work on to improve the site, I just plan to use this horizontal scrolling frequently throughout.

1 Like

Bump, anyone able to help?

Bump Bump… Nobody?

Bump… Still no answers…