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

Design help Animations & Interactions
1

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.

Horizontal Scroll Example

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:

Thanks!

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

https://preview.webflow.com/preview/apply-with-brady-2?utm_medium=preview_link&utm_source=designer&utm_content=apply-with-brady-2&preview=4f2a12a1d856fcb9aae753515e5871ec&mode=preview

**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
2

Bump, anyone able to help?

3

Bump Bump… Nobody?

4

Bump… Still no answers…

6

Hi @bradybell33
I’ve managed to solve the same issue with this jQuery code:

https://jsfiddle.net/q3pf2hge

It took some fiddling around with stuff to get it to work, but it looks something like this

  1. div-wrapper, relative, 100% width and the height you want (with the ID set to “box” as it matches the jQuery code)

  2. div inside, set to same height and 400vw (that’s just my width, I guess you could change it to what matches your content width)

  3. lastly, divs inside with your content you would like to scroll through

And then adding in the code, ofc.

Hope it helps!

1 Like
7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.