需求场景
项目结构:vue node.js webpack
滚动条滚动到某处的时候 tab就切换成当前位置的值并且点击tab还能滚动到想要的位置,大概就是锚点跳转的意思。
直接上代码
这里必须是mounted下的,因为方法是要操作dom的,mounted就是挂载完dom树后执行的钩子
mounted() {
window.addEventListener(‘scroll’, this.handleScrollBf, true); // 监听(绑定)滚轮滚动事件
},
//这里必须要移除掉这个window添加的监听事件,要不然在别的界面也会出发滚动监听
destroyed: function () {
window.removeEventListener('scroll', this.handleScroll, true); // 离开页面清除(移除)滚轮滚动事件
},
methoods:{
//滚动事件
handleScroll: function () {
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 设备/屏幕高度
let scrollObj = document.getElementsByClassName('content')[0]; // 滚动区域
let scrollTop = scrollObj.scrollTop; // div 到头部的距离
//这里就可以做事情拉 比如
let baseInfo = document.getElementById('baseInfo').offsetTop;
if(scrollTop>0&&scrollTop<baseInfo ){
this.activeName = 'baseInfo'
}
//上面是实现当滚动距离大于0并且小于id是baseInfo 到头顶的距离时候 设置 this.activeName = 'baseInfo' 然后下面就可以随意拓展了
},
//tab切换 然后这个就是点击该tab栏去跳转到固定位置的方法
handleClick(){
let scrollObj = document.getElementsByClassName(‘content’)[0]; // 滚动区域
let activeObjTop = document.getElementById(this.activeName).offsetTop;
scrollObj.scrollTo(0,activeObjTop)
},
}
THE LAST
描述虽少,但实现了这个需求了,有发现写错的地方望大佬指出,小弟不胜感激
上两张效果图