Question

我想知道用户从顶部向下滚动了多少像素。因此，看不见的像素数加上当前视口中可见的像素数。

使用Jquery时，我使用的$(window).scrollTop()滚动到页面底部时显示612像素，但是$(document).height()报告的总高度为1276像素。

当我到达页面底部时，我想知道的数字将是1276。

希望如此。

Answer 1

听起来您要获取的是窗口当前Y偏移量的底部。

这可以通过将窗口的scrollTop()和innerHeight相加来计算：

$(window).scrollTop() + window.innerHeight

$(window).scroll(function() {
  $("#scrollTop").text($(window).scrollTop() + window.innerHeight);
  $("#docHeight").text($(document).height());
}).scroll();

body {height: 2500px;}
div {position: fixed; top: 0; left: 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>scrollTop:</span> <span id="scrollTop"></span>
  <br>
  <span>document Height:</span> <span id="docHeight"></span>
</div>

Answer 2

要计算用户从顶部开始垂直滚动页面的像素数量，在JavaScript中，我们可以探测 window.pageYOffset ，或者在IE的较早版本中进行探测 document.body.scrollTop 的几种变体，无论支持哪种属性：

var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop

相反，使用jQuery相当于：

var scrollTop = $(window).scrollTop()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>

<div style="height:1000px"></div>

<p id="output" style="position:fixed; left:0; top:0; padding:10px; font-weight:bold">
	You have scrolled the page by:
</p>

<script>

var output = document.getElementById('output')

window.addEventListener("scroll", function(){
	var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
	output.innerHTML = 'You have scrolled the page by: ' + scrollTop +'px'

}, false)

</script>




<script>

/* ### jQuery version below. Uncomment to see: ### */

/*

var $output = $('#output')

$(window).on('scroll', function(){
	var scrollTop = $(window).scrollTop()
	$output.html( 'You have scrolled the page by: ' + scrollTop +'px' )
})

*/

</script>


</body>

计算用户向下滚动多少像素

2 个答案: