Webpage Not Scrolling

I have a webpage that uses only CSS and HTML for some reason even though the div is below the page it wont let me scroll the page down to see the rest of the div and background ive

Solution 1:

Remove overflow: hidden; from each section. Test it to make sure you can scroll.

Then add it back but only on the sections where you actually want the overflow to be hidden.

This is because overflow is considered as anything outside of the element's dimensions. Given body's dimensions generally takes up the whole viewport (or viewing window) and everything outside of the window is considered overflow, since you have overflow: hidden, the browser hides the content outside of the viewport.

Removing overflow: hidden should work because overflow: auto is the default value (therefore you don't have to list it yourself), which adds a scrollbar when there is content outside of the element's bounds.

Solution 2:

If you remove the overflow properties on your html and body tags, you will be able to scroll.

By setting the overflow property to "hidden" on the html and body tags, you are saying that the page shouldn't scroll, even though there is much more content below, it's all considered overflow.

Solution 3:

Add overflow:auto to your body tag. This should solve your problem. Recently even i had the same problem and fixed it with overflow-y:auto which allow you to scroll vertically in mobile view of the site

Solution 4:

There are two cases here

1. If you are using overflow hidden in main div of body tag then this maybe the reason of it.

Solution : remove overflow: hidden, specially overflow-y : hidden from main div or body

2. If you are using scrollbar width as 0 and height as 0 then this also creates the same problem or you need to force for scroll

Solution : you can either give width greater than 0 and if you want scrollbar hidden but scrolling functionality then you can use like this

::-webkit-scrollbar {
    width: 6px;
    height: 10px;
    display: none;
}