vue监听滚动条位置,并且使滚动条到指定位置
首先向页面添加滚动事件,可以实时获取到滚动条的位置methods: {//滚动事件handleScroll() {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;var offsetTop = document.querySelector('#ta
·
首先向页面添加滚动事件,可以实时获取到滚动条的位置
methods: {
//滚动事件
handleScroll() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var offsetTop = document.querySelector('#tabbarBox').offsetTop // 获取所需元素到文档顶部的距离,然后判断滚动条位置让该元素是否固定定位
// console.log(scrollTop,offsetTop)
if (scrollTop > offsetTop) {
this.tabbarBoxFixed = true
} else {
this.tabbarBoxFixed = false
}
},
},
mounted() {
// 向页面添加股东事件
window.addEventListener('scroll', this.handleScroll, true);
},
destroyed() { //离开这个界面之后,删除滚动事件,不然容易除bug
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.leftIndex = index;
this.$el.querySelector(`#id${index}`).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
},
更多推荐
已为社区贡献3条内容
所有评论(0)