首先向页面添加滚动事件,可以实时获取到滚动条的位置
methods: {
handleScroll() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var offsetTop = document.querySelector('#tabbarBox').offsetTop
if (scrollTop > offsetTop) {
this.tabbarBoxFixed = true
} else {
this.tabbarBoxFixed = false
}
},
},
mounted() {
window.addEventListener('scroll', this.handleScroll, true);
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
},
然后使用scrollIntoView方法可以跳转到指定元素的位置
methods: {
changeTab(num) {
if (num == 1) {
document.getElementById('js-lipei').scrollIntoView({
block: 'start',
behavior: 'smooth'
});
}
else if (num ==2) {
document.getElementById('product').scrollIntoView();
}else {
document.getElementById('form').scrollIntoView();
}
}
}
}```
下面展示一些备注 。
```javascript
有时候是想监听局部页面的滚动,可以使用@scroll事件
<ul class="rightMenu" @scroll="scroll"></ul>
selected(index) {
this.$el.querySelector(`#id${index}`).scrollIntoView({
behavior: "smooth",
block: "start"
});
},