需要注意的是，浏览器一旦检测到滚动条发生滚动，就可以触发 onscroll 事件，而无需等到滚动行为结束。
下面的例子演示了一个极普遍的应用：利用 onscroll 事件检测滚动条位置，当向下滚动到一定位置时，在页面右下角会出现“返回顶部”的锚链接，以方便网站用户快速返回顶部。
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>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>
