.scrollTop（）只返回0

Question

由于某种原因，我的$（窗口）.scrollTop（）总是返回0.这是我的初始代码，滚动函数甚至被调用似乎很奇怪，可能与它有关

$(window).scroll(function(){
  console.log($(window).scrollTop());
});

然后我更改了代码并且现在正在调用滚动功能，但是控制台仅在向下滚动页面时才记录0。：

$('body#main-page').scroll(function(){
  console.log($(window).scrollTop());
});

我认为$（window）.scroll（function（）{}）甚至被调用的事实可能与它有关？

我也试过这个，但没有运气

console.log($('body#main-page').scrollTop());

有关如何调试问题的任何建议或建议吗？

Answer 1

您的第一个代码应该有效。

$(window).scroll(function(){
  console.log($(window).scrollTop());
});

p{
  height:4000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Tall paragraph to force BODY scrollbars</p>

只有当其他元素具有overflow-y: scroll;或类似（overflow:auto;等）

时才会无效

ISSUE：

$(window).scroll(function(){
  console.log($(window).scrollTop());
});

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}

#wrapper{
  overflow-y: scroll;
  width:100vw;
  height:100vh;
}
#wrapper p{
  height:4000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <p>Tall paragraph to force #wrapper scrollbars</p>
</div>

滚动上面的内容，看看控制台中没有任何内容！
导致window未滚动且2：window对scrollTop值没有任何更改。

如果溢出可滚动元素的>0大于scrollHeight（有滚动条），则

scrollTop只能为offsetHeight。

Answer 2

了解scrollTop

来自scrollTop docs：The vertical scroll position is the same as the number of pixels that are hidden from view ... if the element is not scrollable, this number will be 0.

因此，如果您想获得零以外的值

• 元素必须可滚动
• 在此元素内，滚动条必须处于非零位置

在此codepen example中给出了这个html

<div id="wrapper">
  <h1>Scroll to </h1>
  <div id="a">some div</div>
  <a id="link" href="#l">click this link</a>
</div>

和这个css

#wrapper{ overflow-y: scroll;
  width:400px; height:200px;
}

由于使用了css，div id="wrapper"是可滚动的。如果您现在在div#wrapper内向下滚动并点击#link，则使用

计算包装器的滚动条位置

var w = $("#wrapper");
var a = $("#link");
a.click(
  function(){
    a.text("scrollTop:" + w.scrollTop());  
  }  
);

因此，您必须确保满足scrollTop()的两个条件才能获得零以外的值

• 元素必须可滚动（此处为div#wrapper）
• 元素必须处于滚动状态（仅当您在#wrapper中滚动时才会发生）

你可以take a look at this fork并玩弄它。

关于您的问题

scroll函数是否已触发

要解决您的陈述the scroll function wasn't even being called，此example包含与您类似的代码

<style>
  .page{ height: 1200px;}
  p { height: 200px; border: 1px solid green;}
</style>

<div class="page">
  <h1>Hello Plunker!</h1>
  <div>
    <p>This is some text</p>
    <p>The scroll postion is:<i></i></p>

  </div>
</div>

和这个javascript

$(window).scroll(function(){
  var i = $("i");
  i.text($(window).scrollTop());
});

正如您在example中看到的那样，代码会在您滚动后立即生效。因此，为了能够更好地帮助您，您需要查看是否以及为什么它不起作用。

scrollTop返回零

你写了that the console is only logging 0 despite scrolling down the page。原因可能是您的选择器$('body#main-page')匹配不可滚动的元素。没有你的实际代码，我们只能推测。