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

JavaScript024

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

<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>

原理

1.通过监听滚动区域DOM的scroll事件, 计算出触底

// 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度

scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight

2.触底后触发列表添加, 列表添加使用createDocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去, 提高性能, 也方便后面的MutationObserver监听

3.使用MutationObserver监听列表的DOM添加, 添加完毕后, 隐藏加载中提示

示例

https://codepen.io/klren0312/full/dybgayL

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver