Vue 开发,有时候只需要监听某个元素是否滚动就行了,不需要去监听整个页面。
Vue 有自带的 @scroll 但是并没有什么用,给某个滚动元素加上,滚动该元素并不会调用,加上 CSS 支持滚动样式也一样。
怎么监听呢?通过 addEventListener 与 @mousewheel 配合实现
<template>
<!-- 滚动视图 -->
<div class="scrollview" ref="scrollview" @mousewheel="scrollChange">
<!-- 内容区域 -->
<div class="content"></div>
</div>
</template>
<script>
export default {
mounted () {
// 获取指定元素
const scrollview = this.$refs['scrollview']
// 添加滚动监听,该滚动监听了拖拽滚动条
// 尾部的 true 最好加上,我这边测试没加 true ,拖拽滚动条无法监听到滚动,加上则可以监听到拖拽滚动条滚动回调
scrollview.addEventListener('scroll', this.scrollChange, true)
},
// beforeDestroy 与 destroyed 里面移除都行
beforeDestroy () {
// 获取指定元素
const scrollview = this.$refs['scrollview']
// 移除监听
scrollview.removeEventListener('scroll', this.scrollChange, true)
},
methods: {
// 滚动监听
scrollChange () {
console.log('滚动中')
}
}
}
</script>
***如果要滚动某个节点的要作对应的改动scrollTop 的对象
1.最佳方法(vue)兼容性好
document.documentElement.scrollTop = num;
// 锚点跳转
async goScroll(anchor) {
let target = document.getElementById(anchor);
let currentTop = document.documentElement.scrollTop;
let targetTop = target.offsetTop - 200;
console.log(target.offsetTop);
let num = currentTop;
this.timeObj = setInterval(() => {
if (targetTop > currentTop) {
// 向下滚动
num = num + 8;
if (num > targetTop) {
clearInterval(this.timeObj);
}
} else {
// 向上滚动
num = num - 8;
if (num < targetTop) {
clearInterval(this.timeObj);
}
}
document.documentElement.scrollTop = num;
}, 1);
// window.scrollTo(0, target.offsetTop - 200);
},
2.window.scrollTop (0,num)
// 锚点跳转
async goScroll(anchor) {
// anchor是元素id
let target = document.getElementById(anchor);
let currentTop = document.documentElement.scrollTop;
let targetTop = target.offsetTop - 200;
console.log(target.offsetTop);
let num = currentTop;
this.timeObj = setInterval(() => {
if (targetTop > currentTop) {
// 向下滚动
num = num + 8;
if (num > targetTop) {
clearInterval(this.timeObj);
}
} else {
// 向上滚动
num = num - 8;
if (num < targetTop) {
clearInterval(this.timeObj);
}
}
window.scrollTop (0,num)
}, 1);
// window.scrollTo(0, target.offsetTop - 200);
},
3.Element.scrollIntoView()
goScroll(anchor) {
console.log('hhh',anchor)
let target = document.getElementById(anchor)
console.log('target',target)
target.scrollIntoView({
behavior: "smooth",
inline: "start",
block: "start"
})
},
- 锚点跳转:当前url加# 锚点值