scrollTop的高度不正确

Incorrect height with scrollTop

本文关键字：不正确 高度 scrollTop      更新时间：2023-09-26

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

<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个div的高度为100%，那么scrollTop的值应该是3055px，但它显示的是2452px。我做错了什么?

这是一个padding/margin的问题。

apply padding:0; margin:0; to html, body, h1, h2这会解决你的问题。

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

相关文章：