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

JavaScript018

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

<script>window.onscroll=function(){

//变量t就是滚动条滚动时，到顶部的距离var t =document.documentElement.scrollTop||document.body.scrollTop

var left =document.getElementById("left")if( t >=100) { //当拖动到距离顶部100px处时，左边导航固定，不随滚动条滚动

left.style.position="fixed"left.style.top="0"

}else{

//恢复正常left.style.position="absolute" left.style.top="100px"}}</script>

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>

利用scroll 事件来监听。

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

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

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