Disable scrolling but keep the ability to scroll with an anchor link

Design help Custom code
1

Hi all!

I’m trying to create a Choose your own adventure-style experience for an online magazine.

The way I built the solution is: every ‘slide of content’ is a DIV. They are stacked vertically using flexbox.

I’d like to disable the vertical scroll to push users to navigate only using anchor links (highlighted words). The issue is when I disable the y-navigation the anchor links stop working.

I managed to get a ‘temporal’ fix using Webflow interactions: all slides appear hidden by default, except the first one (so basically, there’s no scroll possible by that time).

By clicking/tapping on the first highlight ‘path’, it triggers a change from ‘hidden’ to ‘visible’ for the sliders class meaning anchors work well BUT, by that point, the user CAN scroll with freedom and that’s not what we want.

I already googled the issue and I understand there’s some workaround using Javascript but I’m not an expert – to be honest, I have no idea where to start.

I’ll appreciate any help!

Thanks,
Franco

Here is my site Read-Only: LINK
At the moment we have 2 examples, both inside of the ‘En la mente de’ folder.

2

I whipped this up hopefully this helps. Its basic to show proof on concept.

https://preview.webflow.com/preview/nsexample?utm_medium=preview_link&utm_source=dashboard&utm_content=nsexample&preview=a65f480fc1b20a261b8c9e9b7b63b4d2&mode=preview

3

Cheers @DasSean! I really appreciate it.

While this actually makes the job and it’s great, still makes the workaround a bit tricky in terms of scalability.

An article in these ‘Choose your own adventure’ series normally have around 30 slides, meaning we will need to create bespoke interactions for each slide + new interactions every time an article is published.

I will definitely use your solution in the next article but I still feel a solution around anchor links will be the easiest way to go as I can link the slides straight away from the link property panel.

Thanks!

1 Like