Continuing the discussion from Touch friendly Horizontal scrolling without scroll-bar:
Hey @dram ,
Is there a way to get your idea to hide the horizontal scroll bar and still get it to scroll horizontally on desktop (without touchscreen)? I’m trying to make scrolling tabs that look and feel just like Google images or Printerest:
This is as far as I’ve gotten: Learn how you can move abroad to Asia
It works great on mobile but on desktop I can’t find a way to make it work and have the horizontal scrolling bar hidden that is also responsive (I tried doing it with slides, but it was messy and not responsive). I know there would need to be a button to navigate left and right but couldn’t make that happen either with interactions either.
Is there a way to achieve this without having to use js?
The closest to an answer I’ve found this thread and have been scouting for a good while without finding a clear answer, hoping you can help me.
Try using this code
/* Hide scrollbar for Chrome, Safari and Opera */
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
Just exchange the .example with .your-class-which-has-overflow
Let me know how it goes
I don’t think so, no. You will have to interact with the scrollable content in some ways, and if it is not a scrollbar then its some sort of buttons. Which will rely on scripts of different kinds.
Thank you for your answer and sorry for this really late reply. It’s confirmed then, you need js for this to work.
That being said, have you used / do you know any script to achieve this?
I tried “tricking” it by using buttons with an interaction that moves the tabs container on the X axis. But it’s a pain to get right and feels a bit wonky.
Thank you. This solves half the problem, though. As dram points out below, you still need something to interact with the tabs. A set of buttons or something and that is the part that brings me trouble.