vue.js 怎么监听滚动条? 下面本篇文章给大家介绍一下 vue 实现监听滚动条的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
vue 实现监听滚动条
其实你百度了一下基本都是
- mounted() {
- Windows.addEventListener('scroll', this.handleScroll)
- },
- methods: {
- handleScroll() {
- console.log('a')
- }
- }
如何你复制过去基本不会调用 handleScroll 函数, 其实这样写是没有错的. 但是你要在后面第三个参数加上 true, 能成功监听.
- mounted() {
- Windows.addEventListener('scroll', this.handleScroll, true)
- },
- methods: {
- handleScroll() {
- console.log('a')
- }
- }
上面这样写了之后, 是可以获取 scroll 事件但是获取 scroll 都是 0, 最后百度了全部都是说什么 是 DTD 的问题 我也尝试了没有什么用
最后全部使用原生, 然后把容器的 CSS 设置为全屏才可以实现 (https://github.com/Aliceco/backTop)
- mounted() {
- document.getElementById('orderFullScreen').addEventListener('scroll', this.handleScroll)
- },
- methods: {
- // 获取滚动条高度
- handleScroll() {
- console.log(document.getElementById('orderFullScreen').scrollTop)
- },
- }
更多 web 前端 https://www.html.cn/css/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17579.html