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

JavaScript025

如何用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/[email protected]/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>

利用scroll 事件来监听。

当用户滚动指定的元素时,会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。

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>