Hello, I was wondering if disabling scroll on a page is possible. What I am trying to do is the following:
I would like to disable the scroll on one page, and have custom “back” and “next” buttons guide the user to a new section when clicked. I am creating a custom forum, and want the users to answer a question in a “section”, click “next” when complete, and have them automatically directed to the next section on the page.
Is this possible?
Thanks
Hi @Dushaan,
This is absolutely possible, simply set the body to “overflow:hidden” and add some nifty little scroll links.
I’ve made a quick demo for you to dissect here: DEMO
Note: overflow:hidden doesn’t display in preview mode but it does on the live version: LIVE
Sorry for the late reply. This is exactly what I am looking for. Thank you @Olliepop, I will give this a try!
You’re welcome, I’m glad I could help!
Hello @Olliepop , I have just tried it and for some reason, it doesn’t seem to be working. Is there something that I am missing?
https://preview.webflow.com/preview/ivy-and-aspen?preview=121435b28fd03739ff02cb13befdd95e
Please refer to the “pricing” page. (next/back buttons)
@Dushaan As I mentioned before, this method doesn’t show in Webflow’s preview mode.
I’ve checked the published version of your site and it’s working perfectly.
Out of interest, what browser are you using?
I am using Safari. It seems to be working on every browser except Safari, It may be due to an update I will need to make.
Thank you for your help @Olliepop !
I have another question you can possibly help me with. When I click on the button that takes me to the next section, it only scrolls to about 75% of the section. Since I can not scroll, I can no longer view or click the next and back button. Is there a way to show the next section and show 100% of the section instead of 75%?
OK, that’s strange. I’ve given it a little google and apparently Safari has a nasty habit of ignoring ‘overflow:hidden’ when set to the body or html.
Try wrapping everything in a div and setting that div to ‘overflow:hidden’ and let me know if that fixes the problem.
As for the scrolling problem - Funnily enough you need to do the same thing! 
The scroll is stopping short because it is expecting your nav bar to be at the top of the window, as opposed to yours which you’ve fixed at the bottom.
If you wrap your navigation in a div, it will fully scroll to the section.
My lesson learned for the day - “If it’s not working… wrap it in a div”
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.