CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5201742
user5201742

Reputation:

Incorrect height with scrollTop

I'm trying to count the number of pixels user has scrolled, but the total than scrollTop shows is different from the sum of the different window's height defined.

HTML

<body>
<div class="slide slide1">
</div>
<div class="slide slide2">
</div>
<div class="slide slide3">
</div>
<div class="slide slide4">
</div>
<div class="slide slide5">
</div>

</body>

CSS

html, body {
    height: 100%;
}

.slide {
    width: 100%;
    height: 100%; 
}

.slide1 {
    background: red;
}

.slide2 {
    background: blue;
}

.slide3 {
    background: yellow;
}

.slide4 {
    background: green;
}

.slide5 {
    background: gray;
}

JS

$(document).ready(function(){

        $(window).scrollTop($(document).height());

        $('h2').text($(window).height() + 'px');
        $('h1').text($(document).scrollTop() + 'px');

        $(window).scroll(function () {
            $('h1').text( $(this).scrollTop() + 'px');
        });
});

Fiddle: https://jsfiddle.net/w9bxhsvj/2/

For example, if the window height is 611px, and there are 5 divs with height 100%, the scrollTop value should be 3055px, but it shows 2452px. ¿What am I doing wrong?

Upvotes: 1

Views: 3108

Answers (1)

Yukul&#233;l&#233;
Yukul&#233;l&#233;

Reputation: 17062

It's a padding/margin problem.

apply padding:0; margin:0; to html, body, h1, h2 it will solve your problem.

https://jsfiddle.net/w9bxhsvj/4/

Upvotes: 1

Related Questions