Question

我正在尝试计算用户滚动的像素数，但总数比scrollTop显示的不同于定义的不同窗口高度的总和。

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');
        });
});

小提琴：https://jsfiddle.net/w9bxhsvj/2/

例如，如果窗口高度为611px，并且有5个高度为100％的div，则 scrollTop 值应为3055px，但它显示为2452px。我做错了什么？

Answer 1

这是填充/边距问题。

将padding:0; margin:0;应用于html, body, h1, h2 它会解决你的问题。

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

scrollTop

1 个答案: