<!-- html --> <el-tabs v-model="activeName" type="card" @tab-click="tabClick"> <el-tab-pane :label="item.name" :name="item.key" v-for="item in tabList" :key="item.key"></el-tab-pane> </el-tabs> <!-- js --> methods:{ //获取当前元素的offsetTop getOffsetTop(obj) { let offsetTop = 0; while (obj != window.document.body && obj != null) { offsetTop += obj.offsetTop; obj = obj.offsetParent; } return offsetTop; }, <!--锚点点击事件--> <!--fixedHeight 滚动的位置上方固定的高度--> tabClick(e) { let _this = this; //获取当前选中的index以便后面滚动高亮 this.index = parseInt(e.index); //给定一个标识，锚点事件不触发滚动 this.isScroll = false; this.isChange = false; //获取当前选中元素的top值（给元素绑定对应的ref值） let offsetTop = this.getOffsetTop(this.$refs[this.activeName]); let scrollTop = offsetTop - this.fixedHeight; window.scrollTo({ top: scrollTop }); }
不得不提的一个方法就是scrollIntoView，Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内，同时还支持动态效果，但是不支持配置滚动到距离顶部的距离，会出现遮罩现象，但是很适合做会到顶部的功能
滚动高亮按钮
当用户滚动内容区时，高亮距离按钮组件最近的那个元素所对应的按钮。 通过监听滚动事件，获取当前选中的tab的offsetTop值和当前页面的scrollTop值，判断向上或者向下滚动，做出不同的处理，具体如下：
//页面滚动要做的事情 handleScroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; this.scrollTop = scrollTop; <!--isScroll 用于避免锚点事件触发页面滚动--> if (!this.isScroll) return; /** * scrollTop 页面的滚动条的高度 * offsetTop 当前选中的tab元素的offsetTop * offsetHeight 当前选中元素的高度 */ let offsetTop = this.getOffsetTop(this.$refs[this.activeName]); let offsetHeight = this.$refs[this.activeName].offsetHeight; let actuaTop = scrollTop + this.fixedHeight; let length = this.tabList.length; /** * 页面滚动中根据相应位置变换选中tab */ if (actuaTop < offsetTop && this.index > 0) { this.index = this.index - 1; this.activeName = this.tabList[this.index].key; } else if (this.index < length && actuaTop > offsetTop + offsetHeight) { this.index = this.index + 1; this.activeName = this.tabList[this.index].key; } }
性能优化
页面中读取属性会导致页面reflow（下次会对导致页面reflow和repaint 的操作做一个总结），过度的reflow会导致页面性能下降，所以我们应该尽量减少reflow的次数，以便给用户更好的体验。 如果产品可以接受效果有延迟，就可以使用节流函数控制在一定时间内只执行一次函数（节流函数可以使用lodash.js 封装好的 throttle 方法）
总结
写到这里，需求中的三个功能都已经实现，也许还存在更好的方案，但是通过这次实现这三个需求，如果大家有其他更好的方法，欢迎留言补充，但我也从中学习到了一些东西 1.position：sticky的用法和使用条件
2.scrollTop、offsetTop等元素的相关属性、getBoundingClientRect()用法和 scrollTo、scrollIntoView的用法 3.锚点时间和滚动高亮事件导致的冲突处理等
以上所述是小编给大家介绍的vue实现吸顶、锚点和滚动高亮按钮效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: