CODEWITHSUNDEEP
javascripthtmlcssoverflowscrolltop
scwcompton
scwcompton

Reputation: 51

scrollTop Broken: Body Height 100%, Overflow Auto

http://jsfiddle.net/o7z1pnfx/

I am working on a website with the following layout:

<html>
    <head></head>
    <body>
        <div id="left"></div>
        <div id="main"></div>
    </body>
</html>

And the following CSS:

* {
    box-sizing:border-box;
}
html,
body {
    height:100%;
    margin:0;
    padding:0;
}
html {
    overflow:hidden;
}
body {
    overflow:auto;
}
#left,
#main {
    min-height:100%;
    float:left;
}

The rest of the CSS isn't really important, but rest assured that I have the floats cleared, etc. The layout looks exactly as I want it to.

The purpose of the provided CSS is to make it so that #left and #main will be at minimum the height of the window, but if either grows larger, the page will grow larger with it. This is working as intended.

The issue is that I need to use the Y scroll position in my JavaScript at some point, but the combination of height:100% and overflow:auto on body are causing body's scrollTop property to always be 0.

If anybody has a JavaScript alternative or a small CSS change to fix this, that would be great. I would prefer to avoid larger CSS changes, but they still may be helpful.

Thanks!

Upvotes: 3

Views: 4369

Answers (5)

i_a
i_a

Reputation: 2763

Using just min-height won't break the scroll functions. (only tested in Chrome). 100vh seems to work fine too.

body, html {
    min-height: 100%;
}

or

body, html {
    min-height: 100vh;
}

Upvotes: 2

Nhu Trinh
Nhu Trinh

Reputation: 13956

Sorry for my late solution but I just encouter an issue just like you. The point is html tag doesnt like any overflow rule in it. Just remove any overflow from html and put in body and it work

Upvotes: 2

Alexandre Bourlier
Alexandre Bourlier

Reputation: 4118

Actually @scwcompton, your answer lead me on the right track for a fine workaround. What happens is actually that webkit browsers don't repaint the page for some reason.

Forcing the repaint fixed the issue for me. I added the following code right before I animate the body element : 

  MLB.BODY = $("#body");
  MLB.BODY.css("display", "none");
  MLB.BODY.height(); // no need to store this anywhere, the reference is enough
  MLB.BODY.css("display", '');


  MLB.BODY.scrollTop(99999);

Upvotes: 0

benjaminjosephw
benjaminjosephw

Reputation: 4417

Looks to me like you can get around this bug by using 100vh on the elements you want to always be the height of the window.

See the modified jsfiddle.

Viewport units arn't perfectly suported but it looks like this will work in most modern browsers.

Upvotes: 0

scwcompton
scwcompton

Reputation: 51

Tested on Firefox and it was not an issue. I believe it is a mistake with Chrome, and am reporting it as such. Don't know a workaround, doubt one exists.

Edit: sigh, also seems to be an issue in Safari.

Upvotes: 2

Related Questions