Just wondered how they made it so you can drag and move the twitter reviews used on the webflow homepage. This also works on mobiles and lets you swipe.
It has to do with overflow scroll
In webflow it’s here
and it’s a flex element so the list of item easily goes out of the boundaries of the element.
hmmm, tried to recreate this but the scroll overflow only allows for up and down.
Thanks for making this post! Can you post a read-only link of the site you tried this on?
Thanks in advance, and I’m standing by for your reply!
It’s more how they did it for the webflow site as it states it’s built in webflow but not sure how they have made the scroll overflow work on the X axis
If the section has a width wider than the total view width the scroll effect will work horizontally.
Hope this helps
That works but I can’t get rid of the scroll bar? Is it automatic
Here is the Read-Only link for the above site.
To get rid of the scroll bar you will have to add in some custom CSS.
Something like this
Just looking at the site link you sent and you have no scroll bar but no sign of any code to do this? Is the code in the backend of the site?
Hey! I built this without any custom code actually. Let me briefly walk you through it.
The parent container has 100% width and a set height (which is important) as well as overflow set to hidden and relative positioning.
Next, I set the child element (that contains content that is too wide for the viewport) to be 25px taller than it’s parent (which remember, is overflow hidden) as well as overflow scroll, and position absolute, and bottom -25px.
What this does is hide any scrollbar on any device because it is hidden away in the 25px that was cut off, while still allowing you to scroll side to side on devices with trackpads etc.
Does that make sense?
Sneaky! I like it
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.