gpt4 book ai didi

javascript - scrollTop 的高度不正确

转载 作者:太空宇宙 更新时间:2023-11-04 02:51:34 26 4
gpt4 key购买 nike

我正在尝试计算用户滚动的像素数,但 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');
});
});

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

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

最佳答案

这是一个填充/边距问题。

应用填充:0; margin:0;html, body, h1, h2它将解决您的问题。

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

关于javascript - scrollTop 的高度不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32899417/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com