# How to avoid scrolling in an entire page?

**URL:** <https://community.weweb.io/t/how-to-avoid-scrolling-in-an-entire-page/7702>\
**Category:** Ask us anything\
**Created:** [March 21, 2024, 5:13pm UTC](https://community.weweb.io/t/how-to-avoid-scrolling-in-an-entire-page/7702 "2024-03-21T17:13:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![IKR](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ikr/32/8200_2.png) [@IKR](https://community.weweb.io/u/IKR)\
**Post date:** [March 21, 2024, 5:13pm UTC](https://community.weweb.io/t/how-to-avoid-scrolling-in-an-entire-page/7702/1 "2024-03-21T17:13:20Z")

</div>

Hello again,

lets say i have a drawer with scroll, or actually can be modal as well or whatever, with overflow auto or scroll etc.

When the drawer or modal reach their endpoint with the scroll, the scroll will continue with the background “scroll”, the only thing that is the difference is the z-index.

where i can put the css code to avoid the scroll for the entire page while, lets say, a modal or a drawer is open at the moment?

I can actually do it with classes and put the css style in the header or footer, just not sure how it will work with the loading times.

Usuallly, i will have different css files and include it if necessary.

Some clarification would be very appriciated, to understand how it works here.

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [March 21, 2024, 5:39pm UTC](https://community.weweb.io/t/how-to-avoid-scrolling-in-an-entire-page/7702/2 "2024-03-21T17:39:54Z")

</div>

I guess you can try to put your whole page inside the same section and bind the overflow on the section so when the modal or your drawer is open it disable the scroll on the section

---

<div class="post-metadata">

**Author:** ![IKR](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ikr/32/8200_2.png) [@IKR](https://community.weweb.io/u/IKR)\
**Post date:** [March 22, 2024, 3:55pm UTC](https://community.weweb.io/t/how-to-avoid-scrolling-in-an-entire-page/7702/3 "2024-03-22T15:55:23Z")

</div>

Not sure but is it possible to upload .css files into weweb and use them like binding the class?  
I was trying but sees not to work.

Update:  
Maybe my question was wrong, but when i have more time i can explain better, sorry.

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [March 22, 2024, 3:59pm UTC](https://community.weweb.io/t/how-to-avoid-scrolling-in-an-entire-page/7702/4 "2024-03-22T15:59:11Z")

</div>

Someone else seems to already have solved your exact case

> [@Disable scroll on body when modal is launched](https://community.weweb.io/t/disable-scroll-on-body-when-modal-is-launched/5198):
>
> Hey everyone wave … when a modal is launched we’d like to disable the scroll on main body. For example, if a user scrolls and there is nothing to scroll on the modal itself, the position on main page shifts. On mobile this causes problems with the nav bar appearing/disappearing. Anyone have ideas about how to disable background scroll when modal is launched? Thanks!

---

<div class="post-metadata">

**Author:** ![IKR](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ikr/32/8200_2.png) [@IKR](https://community.weweb.io/u/IKR)\
**Post date:** [March 22, 2024, 4:01pm UTC](https://community.weweb.io/t/how-to-avoid-scrolling-in-an-entire-page/7702/5 "2024-03-22T16:01:34Z")

</div>

looks good, thanks.

Will try it now.