My html page does not scroll in browsers

Question

The page on my site does not scroll. If there is more content than the screen can fit, you won’t be able to see it because the scroll does not work. I am not a CSS guru, and I don’t know if the problem is really with CSS or HTML.

I spent some time trying to understand the problem, but I am not a CSS guru, so I hope someone can help me. This page uses tweeter bootstrap and a custom theme (which I did not write). When I do not include the CSS theme, file scrolling works fine.

Part of my theme CSS file:

body { color: #000; font-family: 'Play', sans-serif; font-size: 16px; line-height: 25px; background: #e0dbcd url('../images/bg.jpg'); letter-spacing:0.2px; overflow: hidden; } 

Answer 1

remove overflow: hidden; from body in bootstrap-theme.css file.

Answer 2

For those that were in my scenario, this could be due to height: 100% for html, body in angular -material.css. Remove it and you will go well.

Answer 3

This may not be acceptable to everyone, but I will still comment on it. I used

pseudo :after

on the body and applied

position: fixed

below a certain point of view on css however i put

.classname

but not

.classname:after

on the item. I will post CSS below. that it forced to fix the position of the page so that it does not scroll.

full CSS that matters:

 body { background-color: #5c2028; color: #ffffff; min-width: 100%; min-height: 100%; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; -ms-box-sizing: border-box !important; box-sizing: border-box !important; overflow-x: hidden; } body.bg{ background-image: url('../img/background.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; background-clip: none; min-width: 100%; min-height: 100%; width: auto; height: auto; } body.bg:after{ content : ""; background-image: url('../img/hildasball_7_d_s_bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; background-clip: none; display: block; position: fixed; top: 0; left: 0; opacity : 1.0; z-index: -2; min-width: 100%; min-height: 100%; width: 100%; height: 100%; /*width: auto; height: auto;*/ } @media (max-width: 767px) { body{ min-height: 800px; } 

/ * Initially, I put body.bg not body.bg:after, because of which things don't scroll, and I ended up getting confused as hell * /

  body.bg:after{ position: fixed; } .floatContact { float: none; } } 

Answer 4

I agree that all of the above will add that I recently discovered the following CSS in my code.

 * { -moz-transition: .5s ease-in-out; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } 

It can also interfere with HTML & body scrolling. Therefore, I would recommend adding this transition effect to the specific component that you want to receive, and not to the HTML & body.