为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我没有得到 scrollTop 值?

为什么我没有得到 scrollTop 值?

潇潇雨雨 2023-01-06 15:56:45

我想获得一个元素的scrollTop值,这样我就可以根据它触发其他事情。客户端应始终检查scrollTop值,因此我使用onscroll来运行该函数。它不起作用,我总是得到 0。


<!DOCTYPE html>

<html>

<head></head>

<body onscroll="get_y_pos();">

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

  <div id="element_to_watch" style="height: 400px; width: 300px; background: blue; margin: 20px;"></div>

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

</body>

  <script>

    function get_y_pos() {

      var pos = document.getElementById('element_to_watch').scrollTop;

      console.log(pos);

    }

  </script>

</html>


查看完整描述

2 回答

?
心有法竹

TA贡献1629条经验 获得超5个赞

正如@bertida 所述,要实现这一点,getBoundingClientRect().top应该使用而不是scrollTop.


<!DOCTYPE html>

<html>

<head></head>

<body onscroll="get_y_pos();">

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

  <div id="element_to_watch" style="height: 400px; width: 300px; background: blue; margin: 20px;"></div>

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

</body>

  <script>

    function get_y_pos() {

      var pos = document.getElementById('element_to_watch').getBoundingClientRect().top;

      console.log(pos);

    }

  </script>

</html>


查看完整回答
反对 回复 2023-01-06
?
元芳怎么了

TA贡献1530条经验 获得超7个赞

正如有人已经说过的那样,您需要向元素添加垂直滚动条才能检查其scrollTop值。检查更新的代码片段。


<!DOCTYPE html>

<html>

<head></head>

<body onscroll="get_y_pos();" style="overflow: visible;">

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

  <div id="element_to_watch" style="height: 300px; width: 300px; background: blue; margin: 20px; overflow-y: scroll;">

    <h1 style="height: 500px">Hallo</h1>

  </div>

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

  <div style="height: 400px; width: 300px; background: red; margin: 20px;"></div>

</body>

  <script>

    function get_y_pos() {

      var pos = document.getElementById('element_to_watch');

      console.log(pos.scrollTop);

    }

  </script>

</html>


查看完整回答
反对 回复 2023-01-06
  • 2 回答
  • 0 关注
  • 14 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信