1.想要实现的效果
twst.gif
2. 需求
div滚动的时候，根据滚动的距离，来判断页签的高亮和定位
3. 实现原理
使用addEventListener监听div的scroll事件，获取div滚动的sceollTop， 使用forEach来获取div所在的offsetTop值，当scrollTop >= item.offsetTop 时，就高亮当前楼梯
使用scrollTo的 behavior: 'smooth'来定位我们要的楼梯的位置
4. 实现代码
mounted() {
this.box = this.$refs.viewBox // 获取dom元素
this.box.addEventListener('scroll', () => {
const top = this.$refs.viewBox.scrollTop
this.navScroll(top)
})
},
methods:{
navScroll(top) {
const scrollTop = top
const floor = document.querySelectorAll('.approval-floor')
floor.forEach((item, index) => {
if (scrollTop >= item.offsetTop) {
this.navNum = index
this.activeName = String(index)
// break
}
})
},
handleClick() {
// 滚动到指定位置
const floor = document.querySelectorAll('.approval-floor')
const offsetTop = floor[this.activeName].offsetTop
this.$refs.viewBox.scrollTo({
top: offsetTop,
behavior: 'smooth'
})
}
}
