计算用户向下滚动多少像素
[英]Calculating how many pixels user has scrolled down page
问题描述
I want to know how many pixels from the top a user has scrolled down my page. 
我想知道用户从顶部向下滚动了多少像素。 So , the number of pixels ABOVE that can't be seen PLUS the number of pixels viewable in the current viewport. 因此，看不见的上述像素数量加上当前视口中可见的像素数量。
With Jquery I'm using $(window).scrollTop() which is showing 612 pixels once scrolled to bottom of page, but $(document).height() reports a total height of 1276 pixels. 使用Jquery时，我使用的是$(window).scrollTop() ，它在滚动到页面底部时显示612像素，但是$(document).height()报告的总高度为1276像素。
When I reach the bottom of the page the number I'm wanting to know will be 1276. 当我到达页面底部时，我想知道的数字将是1276。
Hope that makes sense. 希望有道理。
2 个解决方案
解决方案1
1 已采纳 2018-12-04 03:09:34
It sounds like what you're trying to get is the bottom of the window's current Y offset. 听起来您要获取的是窗口当前Y偏移量的底部。
This can be calculated by summing the window's scrollTop() and innerHeight : 这可以通过将窗口的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>
解决方案2
0 2018-12-04 03:05:57
To calculate how much the user has scrolled the page vertically in terms of pixels from the very top, in JavaScript, we would probe either window.pageYOffset , or in older versions of IE, one of several variants of document.body.scrollTop , whichever property is supported: 要计算用户从最顶部开始垂直滚动页面的像素数量，在JavaScript中，我们将探测window.pageYOffset或旧版IE（即document.body.scrollTop的多个变体之一）中的任何一个支持属性：
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
Using jQuery instead, the equivalent would be: 改用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.