I’d like to disable vertical scrolling for all browsers on desktop and mobile. How do I go about this?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi @nyc,
This can be done using a little custom CSS in the head of the site
overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal
The style for the body should be:
<style>
body {
overflow: -moz-scrollbars-horizontal;
overflow-y: hidden;
overflow-x: auto;
}
</style>
If you just want to prevent scrolling horizontally or vertically, then set the Body to overflow hidden in the designer.
For reference see how to use custom code in the head of the project.
I hope this helps!
Thanks but I’m confused. Where do I paste each respective component? I just want to disable vertical scrolling
@nyc can you share read only link
can you share the live link
What do you mean by live link
https://www.sitename.webflow.io like this
Hi @nyc,
I took a look and it seems you already have the code on the page for the overflow-y set to be hidden.
There is one more step, there is a wrapper element which is set to overflow scroll, so content in that wrapper is scrolling.
If you want the content on the scroll wrapper to also not scroll, then you would need to set the overflow to visible:
Otherwise, it should be working on the published site after publishing.
This is the solution
If I hide that nothing scrolls
I’m very sorry. I meant to ask how do I disable the vertical scroll bar
I’m very sorry. I meant to ask how do I disable the vertical scroll bar.
.body::-webkit-scrollbar {
display: none;
}
@nyc use this in custom code
1 Like
Thanks but this didn’t work. I pasted what you shared in the Head Code and I still see the scroll bar.
1 Like