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>