vue中监听滚动的方法其实可以用:
// Chrome
document.body.scrollTop
// Firefox
document.documentElement.scrollTop
// Safari
window.pageYOffset
:scrollTop(滚动之根本),document.body.scrollTop的值来实现滚动,但是后来逐渐发现很邪门,
有时给其赋值并没有作用,就是不能监听滚动后来知道
mounted() {
this.$nextTick(function() {
let _this = this;
window.addEventListener("scroll", this.onScroll);
});
},
用window.addEventListener 来监听页面的滚动 ,然后在结合(如果没有啥特殊的效果推荐用)
直接用 <a href="#id"> 是最简单粗暴的办法
最后不甘心用这个 href 然后就用了 ref 这个属性来获取;
mounted() {
this.$nextTick(function() {
let _this = this;
_this.$refs.app.scrollTop = ;
_this.height = _this.$refs.app.offsetHeight;
_this.$refs.app.addEventListener("scroll", _this.onScroll, true);
//window.addEventListener("scroll", this.onScroll);
});
},
然后在div
<a href="javascript:;" data-num="1" :class="num==1?'selected':'unselected'" @click="changeTab(1)">活动规则</a>
<a href="javascript:;" data-num="2" :class="num==2?'selected':'unselected'" @click="changeTab(2)">活动介绍</a>
changeTab(num) {
const vm = this;
let otherTop = vm.$refs.other.offsetTop;
vm.num = num;
let scrollTop = 0;
switch (num) {
case 1:
vm.position = false;
scrollTop = 0;
break;
case 2:
vm.position = true;
scrollTop = vm.headerH;
break;
case 3:
vm.position = true;
scrollTop = otherTop;
break;
}
console.log(scrollTop);
setTimeout(() => {
vm.$refs.app.scrollTop = scrollTop;
}, 100);
},
如果 你就得这样不够平滑,可以 用每一小段一小段的跳,这样会导致视觉上是一个平滑的效果,
而不是我点击了就突然scrollTop就突然下去或者上来,避免了很突兀的感觉。
// 平滑滚动,时长500ms,每10ms一跳,共50跳
let step = total / 50 >> 0
这样 就可以实现 锚点 和监听滚动了 ,当然你可以在页面跳转走后销毁 ,这样体验更好
destroyed() {
window.removeEventListener("scroll", this.onScroll);
}