Horizontal scroll div

Design help Custom code
1

I want tho get this type of horizontal scroll when someone scrolls over a div,

so basically I made a div which is wider than the viewport and I want it to scroll to left when someone scrolls over it.

I am not custom code expert, can someone please help me?
Thanks in advance!

image
image718Ă—744 137 KB

2

Hi,

let us see what you have done so far.
Please share a read-only link of your project:

Thanks,

Matthias

3

Sorry,

https://preview.webflow.com/preview/yz-lab?utm_medium=preview_link&utm_source=dashboard&utm_content=yz-lab&preview=44a710b0c69d436bf5676a737d9029c8&mode=preview

4

Have a look here:

1 Like
5

This will actually force the user to see all the slides, I want it to be scrolling selectively, so user can hover over and scroll down on any slide show.

6

Ok. Than use:

-set a “div” to “overflow” “scroll”

  • put your content in this div
  • turn your div “90 deg”
1 Like
7

You are awesome! It works!
But only thing wierd is that when I rotate it, it get in different position and this position relates to the dimensions of the div:
If this can be solved, it will solve every problem.

image
image1447Ă—698 35.3 KB

image
image1447Ă—761 3.12 KB

8

Can you please help me?

1 Like
9

You are right. It’s not easy to handle.
I found a way better solution:

  • create a “div”
  • set it to “flex”
  • set it to “overflow” “scroll”
  • put your content in this div

You have to scroll horizontally with your mouse

10

Thanks again,

I tried it but rotating this also gives the same issue. :sweat:

11

You don’t have to rotate it!
Make sure that you direction is horizontal
image

12

Yes I did that but now it does not scroll automatically, we have to slide the slider to move it.

13

I can move it by using Shift+Scroll, can we bind normal scroll to Shift+Scroll by anyway?

14

One last try to make you happy.
Build something like this:
image

horizontal-scroll-wrapper

  • width 100 %
  • height 400px

scroll-mask
image

1 Like
15

Hey!, I just tried this, didn’t worked for me, maybe doing something wrong.
But I was able to achieve this using some java script. I don’t know if its reliable.

Check: https://yz-lab.webflow.io/

I really appreciate your help.