Question

我使用以下脚本来查看滚动条的位置

$(window).scroll(function(){
    jQuery('.scroll').html(document.body.scrollTop);
});

<div class="scroll"></div>

它只输出div中滚动位置的px，但由于某种原因，位置结果始终不同

喜欢，当我的浏览器窗口（chrome）达到最大值时，我向下滚动页面显示1095px

当我没有最大化我的窗口时，我向下滚动显示1600px

当我在IE中打开它时，它显示1065px

所以出于某种原因，取决于windowmode和browsertype，当我想要计算滚动条的位置时，我会得到不同的结果

我在这里做错了什么？

哦，我使用以下脚本的结果。如果滚动位于某个位置，显示div（这就是想法），我正在搜索一个脚本，我可以设置函数来区分不同的位置 500px显示菜单 1000px显示div 1200px显示footerform 等

  if ($(window).scrollTop() >= 1000) {

    $('.showdiv').fadeIn(500);

  }

所以，如果我无法正确计算位置，那么脚本就不起作用了：）

任何帮助将不胜感激

Answer 1

scrollTop返回的值是元素的距离高于渲染窗口顶部的值。

   +-----------+     \
   |           |     |  - this distance.
+----------------- + /
|  |           |   |
|  |           |   |
|  +-----------+   |
|                  |
|                  |
|                  |
|                  |
+------------------+

如果你有一个1000像素高的div，并且你的渲染窗口是600px，你将比渲染边缘高400像素。如果渲染窗口为200px，则渲染边缘将高出800px。

您可以将其视为您需要向上滚动以显示元素顶部的距离。

如果您可以通过缩小窗口来查看此效果，然后向下滚动页面~100px。

现在拉下窗户的底部。一旦滚动条到达页面底部，您就会注意到值开始减小。

http://jsbin.com/ibefal/2

更多信息：http://www.w3.org/TR/cssom-view/#dom-element-scrolltop

为什么滚动位置不同的浏览器/窗口模式

1 个答案: