15

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 know if the problem is actually with CSS or HTML.

I've spend some time trying to understand the problem but i'm not a CSS guru so I hope someone can help me. The page is using tweeter-bootstrap and custom theme for it (which i did not write). When I don't include theme CSS file scrolling is working 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;
}
oz123
  • 27,559
  • 27
  • 125
  • 187
Pol
  • 24,517
  • 28
  • 74
  • 95
  • 1
    No problem in Chrome 31.0.1650.57 – Preview Nov 18 '13 at 01:42
  • @Aperçu I tried in chorme and and firefox. The same problem. Shut.. needed to test on other machines. – Pol Nov 18 '13 at 01:45
  • 1
    Please make a small self-contained example which shows your problem - your website code will likely not be the same in the future, so this question will be obsoleted if that happens. – Nightfirecat Nov 18 '13 at 01:46
  • I actually tried in chrome 31.0.1650.48 and get the same problem, check my answer below. – Nabbit Nov 18 '13 at 01:47
  • @Nightfirecat sure I'll do that. THank you for pointing out. – Pol Nov 18 '13 at 01:48
  • There used to be a chrome bug that allowed scrolling with `overflow:hidden`, in chrome 32 or 33 they fixed it, you will see the issue – markasoftware Nov 18 '13 at 01:49

5 Answers5

45

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

Nabbit
  • 825
  • 11
  • 16
  • Dude. You've save me a couple of hours. Thanks a lot! – Pol Nov 18 '13 at 01:47
  • Cheers Younes, you saved me some time ! – Sephy Jan 15 '15 at 07:21
  • 1
    Likewise...I couldn't figure out what was going either. Besides saying thanks, my only other comment would be that "overflow: hidden" in the "body" could appear in other CSS files besides the bootstrap-theme.css file and cause the same exact problem..as in my case. Thanks again. – user2101068 Aug 13 '15 at 18:08
  • Your answer is simply awesome. – Amar Prem May 26 '17 at 10:06
4

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.

JohnVanDijk
  • 3,546
  • 1
  • 24
  • 27
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.

Bloggrammer
  • 921
  • 8
  • 21
  • To make this answer more useful, maybe you can explain what adding `overflow: scroll` would do, and what the advantage is over just removing the `overflow: hidden`. Maybe add some links to reference documentation that explain these values as well? – Matthijs Kooijman Mar 28 '20 at 08:36
  • Just did that. I hope that helps. – Bloggrammer Mar 29 '20 at 18:47
0

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;
  }
}
Alex139602
  • 3
  • 4
0

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.

nclaudiuf
  • 91
  • 1
  • 5