Streaming live at 10am (PST)

Horizontal scroll like Heco client page on webflow site


#1

Hi Guys,

I try to reproduce the horizontal slider from this page: https://webflow.com/customers/heco, regarding the section: “Life after Webflow”. I’m curious which settings are use to make the slider stop sliding horizontal and go vertical again. At the end of the track it stops at a precise moment which works on all devices like that. Mine just keeps on scrolling.

Here is my project: https://preview.webflow.com/preview/equiem-2018?utm_source=equiem-2018&preview=4975a9c5461aca6a7b95bf219795e17f

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hey @martijnrunia,

first of all I’d like to say I love this site you are making, it’s clean and beautiful and I like the colors very much.

The fix you are wanting to do is very simple:
just drop a Embed element so you can add some custom code.

You can drop this element anywhere you want. But I recommend you place it as a direct child of the body as the first element, so it’s easier to access when you need it.

Put the following custom code inside:
<style>
.wrapper-scroll-benefits { position: sticky; }
<style>

That’s it, you are done.


#3

Hi @gilson

Thanks a lot, its a big project with loads of changes so a bit messy at the moment but it will come out beautifully.

Thanks for your answer. I’ve already implemented that, I put it in the custom code of the page. So I already have it working that the section if fixed and scrolls horizontal instead of vertical. Unless the thing is the end of the scroll. As you see on the example page the horizontal scrolling stops right at the end of the content and proceeds vertically. This works on all browser sizes.

My question is how do make sure the interactions and the track div are correct so my track stops right at the end in stead of having a lot of white space before scrolling vertically again.