Hi everyone!
Does anyone have good idea how to create horizontal scrolling section that is scroll friendly, cursor friendly, touch friendly, and absolutely no scroll-bars on any browsers?
Thanks!
Yeah, just put this section into a parent with overflow:hidden and then use negative bottom margin of about 17px on the horizontal section to hide the scrollbar.
Thanks, but the negative margin does not work.
I tried some other ways but the scrollbar is still there.
.no-scrollbar {
scrollbar-width: none;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.no-scrollbar::-webkit-scrollbar {
width: 0;
display: none;
}
Still finding the way to archive this.
Here is an example on Apple TV+.
There is a tutorial I find online that works, but I cannot figure out which part do the magic yet…
1 Like
Wow, thanks for the screen recording! Let me try!
Although this is obviously not very usable with regular mouse. You may want to use for example swiper.js for scroll and touch and mouse interaction
I have also hit a wall with hiding the overflow scrollbar within Webflow!
I managed to do it on a simple codepen to prove this code works below.
<style>
/*hides the scrollbar but still scrollable for chrome*/
.element::-webkit-scrollbar {
display:none;
}
</style>
But when I try this simple code within Webflow it does not work!
would be great if anybody can work out why? (links below) 
Would prefer to not rely on the - 15 px margin solution
