如何用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>

你需要三个div即可实现,最外层div设置你需要显示的高宽以及overflow为hidden,第二层设置overflow-x。并将其宽度设置来超出最外层div,这样咱们的滚动条就会被在外层div所挡住,也就间接隐藏了滚动条也能滚动

以上便实现了滚动条隐藏且能滚动

这里IE/Chrome的用法是一致的,滚动事件onmousewheel,判断滚动属性为e.wheelDelta,且向上滚动是+120,向下是-120

而FireFox滚动事件DOMMouseScroll,判断滚动属性为e.detail,且向上是-3,向下是+3

这里需要兼容处理一下下。

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>