Hey everyone,
I’m currently experimenting with horizontal scroll.
I want to make a menu, which a user can scroll vertically like the one from apple. The horizontal scroll is only applied if the menu does not fit on one screen.
An example can be found here: Mac - Apple
And I marked the thing I mean in the screenshot below.
Thanks for your help.
demo: http://site-ae5a37.webflow.io/horizontal
1. Create regular div wrapper
Add class horizontal-scroll-menu. We use this class selector under custom code (Part B).
2. Put inside div/link-block “box”
note: In this case, i set fixed width (But if you put text/images inside the box you could use “auto”) + Set display to inline-block
3. Duplicate box X times
The result looks like this:
<style>
/* Create a Horizontal Scrollable Menu */
.horizontal-scroll-menu{
white-space: nowrap; /* Never wrap to the next line */
overflow-x: auto; /* Hide overflow + add scroll */
overflow-y: hidden; /* Hide overflow */
}
</style>
Publish ==> Done 
desktop:
important - on desktop no way to scroll by Grab (Without custom JS - example dragscroll.js). Add custom code -or- resize elements on desktop (To avoid scroll ==> like apple example).
Mobile
overflow-x and white-space added only by custom code (CSS before body/head per page/entire site).
https://www.w3schools.com/cssref/css3_pr_overflow-x.asp
overflow-x: auto;
Should cause a scrolling mechanism to be provided for overflowing boxes
The white-space property specifies how white-space inside an element is handled. Read more
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is encountered.
One common use for display: inline-block is to display list items horizontally instead of vertically. Read more
Before body:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.min.js"></script>
Add the dragscroll class to a scrollable element:
Sometimes this is useful.
<style>
/* Create a Horizontal Scrollable Menu */
.horizontal-scroll-menu{
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
/* hide scrollbar on desktop */
@media only screen and (min-width: 991px) {
.horizontal-scroll-menu::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
}
</style>
Publish ==> Done.
@Siton_Systems Hi Ezra!
Thanks for posting this! I’m trying it right now but am pretty new to code/learning along the way… is there any way you know of to utilize this scroll function on mobile, but keep the box widths constant while incorporating text/images. Essentially, I want all of my boxes to be the same width as the user scrolls through them, but my text is of different lengths, so setting “auto” for the width wouldn’t work.
I think it has to do with the custom code and “overflow” but right now, even though I’ve set a max width for my text, it’s not respecting that… (screenshot attached, though I haven’t filled all the different text… trying to make a timeline eventually!).
Any help would be very much appreciated!
Thank you!
Erin
Thanks for posting this. I was looking for something like this to use in my Collection Pages heavy project where collection 1 category are links you can horizontally scroll through, and then clicking brings to collection page with product types.
Brilliant. Exactly what I was looking for. But i tried to replicate it to a collection list and it did not work. If you have the step missing for collection, that would be amazing. Thanks
I’ve implemented this dragscroll to my site and it works perfectly on desktop, but when tested on mobile the whole “bar” jumps around (random left and right) when trying to select different div’s inside. I use it for filtering with 50 ish categories. Hope someone can help and that i explained in a way you can understand the issue.
