问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

拖动原生的滚动条，是什么事件

头像
gunner
    386795137

    请教，当我鼠标点着container的滚动条上移动时，用什么事件可以监听呢

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
  #container {
    width: 200px;
    height: 400px;
    border: 1px dotted black;
    margin: 50px auto;
    overflow-y: auto;
  }
  #container ul {
    padding: 0;
    margin: 0;
  }
  #container li {
    width: 400px;
    list-style: none;
    height: 400px;
    line-height: 400px;
    text-align: center;
    margin-bottom: 5px;
    background: khaki;
  }
  #container li:last-child {
    margin: 0;
  }
  #pagi li {
    float: left;
    list-style: none;
  }
</style>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
</head>
<body style="height: 1000px; width: 2000px;">
  <div id="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <ul id="pagi">
    <li><button>首页</button></li>
    <li><button>上一页</button></li>
    <li><button>下一页</button></li>
    <li><button>尾页</button></li>
  </ul>
</body>
</html>
    javascripthtml
    阅读 10.4k
    3 个回答
    得票最新
    头像
    悠扬小Q
      2.3k1412

      在window上监听scroll事件，然后从body.scrollTop获取当前高度

      头像
      Captain
        2.9k42133

        window.addEventListener('scroll',fn)

        头像
        testnullundefine
          2.5k32141

          我不确定你是否想表达监听页面滚动的事件，我发现你在另一个问题中，问了一个操作翻页的问题。

          一般监听滚动条滚动，使用的是 onscroll 事件监听。

          你可以试试下面的代码

           window.onload = function () {
    document.getElementById("container").onscroll = function () {
        console.log(1);
    }
}

          如果你想做页面滚动侦测，除了监听scroll事件之外，可能还会用到求box是否出现在视野区域内。

          这时候可以结合另一个API，getBoundingClientRect()

          https://developer.mozilla.org...

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题