My Html Page Is Not Scrolling In Browsers

June 26, 2023 Post a Comment

The page on my website is not scrolling. If there are more content than screen can fit you can not actually see it because scroll is not working. I'm not and CSS guru and I don't k

Solution 1:

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

Solution 2:

For someone who was in my scenario, this could be happening because of height: 100% for html, body in angular-material.css. Remove it and you're good to go.

Solution 3:

Remove overflow: hidden; from body as @Nabbit suggested or set overflow: scroll;

Edited:

The overflow property controls what happens to content that breaks outside of its bounds. By default, the property is visible i.e. content is not clipped when it proceeds outside its box.

overflow: hidden; means overflowing content will be hidden.

overflow: scroll; this is similar to hidden except users will be able to scroll through the hidden content.

Solution 4:

This may not be relevant for anyone, but i'm going to comment it here anyway - I was using a

pseudo :after

element on the body, and had applied

position: fixed

below a certain viewpoint to the css, however I had put

.classname

and not

.classname:after

on the element. I'll post the CSS below. what this did was fix the position of the page so it could not scroll.

full CSS that's relevant:

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, which made things not scroll and i ended up getting confused as hell */

body.bg:after{ 

    position: fixed;
  }

  .floatContact {
    float: none;
  }
}

Solution 5:

I agree will all above said, something to add I recently discovered in my code is the following CSS added.

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

This also can interfere with the HTML & body scrolling. So I would recommend adding this transition effect in the specific component you desire to have the effect rather than on the HTML & body.

Html5 Lite