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);
}
05-11 15:25
查看更多