Streaming live at 10am (PST)

How do you disable vertical scrolling?

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


add here

1 Like

@nyc can you share read only link

https://preview.webflow.com/preview/gameplan-i?utm_medium=preview_link&utm_source=designer&utm_content=gameplan-i&preview=6dcfed40792d8e39e0f1e5e682975dcd&workflow=preview

can you share the live link

What do you mean by live link

https://www.sitename.webflow.io like this

https://gameplan-i.webflow.io/

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:

Shared with CloudApp

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.

image

1 Like