如何用js监听滚动条滚动事件？

JavaScript023

如何用js监听滚动条滚动事件？,第1张

js监视滚动事件的函数是onscroll

js语法：element.onscroll = functionReference

html语法：<element onscroll="myScript">

vue监听滚动事件实现滚动监听的制作步骤：

在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> <style type="text/css"> #box {  width: 100%  height: 2000px } </style></head><div id="box"></div><body> <!-- vue监听滚动事件 --> <script type="text/javascript"> var vm = new Vue({   el:'#box',  data() {   return {    scroll: ''   }  },  methods: {   menu() {    this.scroll = document.body.scrollTop    console.log(this.scroll)   }  },  mounted() {   window.addEventListener('scroll', this.menu)  }, }) </script></body></html>

js监视滚动事件的函数是onscroll

js语法：element.onscroll = functionReference

html语法：<element onscroll="myScript">

<!DOCTYPE html>

<html lang="en">

  <head>

  <meta charset="UTF-8" />

  <style>

  #container {

    position: absolute

    height: auto

    top: 0

    bottom: 0

    width: auto

    left: 0

    right: 0

    overflow: auto

  }

 

  #foo {

    height:1000px

    width:1000px

    background-color: #777

    display: block

  }

 

  </style>

  </head>

  <body>

    <div id="container">

      <div id="foo"></div>

    </div>

 

    <script type="text/javascript">

      // js绑定你需要监控滚动事件的dom，也可以绑定document.body监控整个网页滚动

      // 也可以监控具体的dom滚动，像下面的container Id对象

      document.getElementById('container').onscroll = function() {

        console.log("scrolling")

      }

    </script>

  </body>

</html>