Link to Anchor not working in horizontal scrolling. Any Reason?

Design help General
1

I have a site am working presently. It is a horizontal scrolling. I have done everything that needs to be done, even adding custom css coding. The problem is that WF link to anchor won’t just scroll to this section.

This is my public link: https://webflow.com/design/fidsonherbal?preview=fe5caacb73b5f72f287014abc6629cc8

This is my custom css code i added. Nothing funky!

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;    
}

.container-block{
    
    vertical-align: top;
    
    
}

.horizonwrapper-block{
 white-space: nowrap;
 margin:0;
    padding:0;
}

Will appreciate suggestion.

2

Please all, I need your help and assistance.

3

Links to anchor position the page t the height of the target section. With horizontal scrolling, it’s already at the desired height so it won’t work as you expect it to.

4

Thanks Vincent, so what is the way out? Am stuck!

5

Hi again. When I go to see your site, I don’t see any horizontal layout. Just a big section on the top with a slider, and sections empty underneath. So what are you trying to do? When you say “horizontal scrolling” do you talk about the slider? Are you trying to link on a particular slide?

I see that on the Home link in the menu you link to About us. That link works, the site scrolls down to the About Us section.

What is your custom code supposed to do?

Please answers these questions to clarify.

What we call horizontal scrolling website is a site that scrolls horizontally instead of vertically. I mean the whole site goes from left to right. I’m a designer and specialise in UI and I always recommend to be extremely careful with horizontal scrolling websites, because they prove to be extremely annoying for users, as they have to take extra steps to navigate the site (clicking on elevators etc). Javascript can be used to hack the vertical natural scrolling and translate it to horizontal, yet again, scroll hacking prove to annoy users as well.

6

Thanks Vincent ,
I have since decided to use WF Slider widget for now.

Initially my custom css code places all the div (container-block) into a bigger div(horizonwrapper-block), the horizonwrapper has a nowrap styling that makes all the container-block line up inline, then use the in-page linking to move users to the divs, i suppose. But your suggestion earlier, made me give it a deep thought and I went for WF slider.

If you still have a solution that works, I would love to study it though. It is this suggestion by Sergie, that motivated me to want to give this approach a shot. His approach has not worked though and I didn’t get any response either. See: Smooth horizontal scrolling - #2 by thesergie - General - Forum | Webflow

Thanks Vincent for your time.