Streaming live at 10am (PST)

Horizontal scroll div

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!

Hi,

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

Thanks,

Matthias

Sorry,

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

Have a look here:

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.

Ok. Than use:

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

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

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.


Can you please help me?

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

Thanks again,

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

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

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

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

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

horizontal-scroll-wrapper

  • width 100 %
  • height 400px

scroll-mask
image

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.

https://jsfiddle.net/q3pf2hge

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

I really appreciate your help.