vue实现吸顶、锚点和滚动高亮按钮效果

2023-08-10 16:57:04 61

因公司后台管理系统很多功能技术老旧，最近在用vue重构公司的后台管理系统，在做商品管理添加商品这一块，借鉴淘宝的添加商品的交互，需要实现一个简单的吸顶、锚点和滚动高亮按钮的效果。

需求

滚动页面到顶部，实现某元素固定到顶部效果
点击某个按钮，页面滚动到相应的位置
滚动页面，当到达某个位置时，高亮对应的相关按钮

元素吸顶实现方式

关于元素吸顶效果，通过查阅相关资料和相关测试，有三种方式（还有一种是jquery的方法，这里就不介绍了）

一、使用position:sticky

1.什么是position:sticky?

粘性定位元素相当于position:relative和position:sticky的结合体，受限于父级元素，在不同的条件下呈现出不同的页面效果

2.如何使用sticky？

sticky元素效果完全受限于父级元素，使用条件：

1.sticky元素的父元素的overflow只能设置为visible，否则会导致没有粘滞效果

2.sticky元素的父元素不能设置固定的高度，否则会导致没有粘滞效果

3.sticky满足条件变成fixed定位时，与标准fixed元素不一样，不会脱离文档流

4.sticky定位的元素不能添加一个只包含自身的父元素,会导致没有粘滞效果

5.同一个父级元素中的sticky元素，如果定位值相等，则会重叠，如果属于不同父级元素中，则会挤掉之前的元素，形成依次占位的效果具体实现效果如下：

.sticky-box{
position:sticky;
position:-webkit-sticky;
top:60px;//可通过js动态设置
}

3.兼容性

通过查看caniuse可以看到相关的兼容性：

可以看出这个属性的兼容性不是那么好，如果项目需要兼容到ie11等的话，就不是那么适用了

二、使用offsetTop**

HTMLElement.offsetTop为只读属性，它返回当前元素相对于其offsetParent元素的顶部内边距的距离。因此我们需要注意的是，在监听页面滚动的过程中，需要将定位父级元素的偏移量也计算在内，可以如下写法：

//获取当前元素的offsetTop
getOffsetTop(obj){
letoffsetTop=0;
while(obj!=window.document.body&&obj!=null){
offsetTop+=obj.offsetTop;
obj=obj.offsetParent;
}
returnoffsetTop;
}

通过在vue的mounted生命周期函数中添加监听事件滚动的事件：

mounted(){
/**通过给变成固定定位的元素添加一个同等高度的父元素，防止该元素变成固定定位时，脱离文档流导致的页面抖动*/
this.tabsHeight=this.$refs.elTabs.offsetHeight;
window.addEventListener("scroll",this.handleScroll);
},
destroyed(){
//离开该页面需要移除这个监听的事件
window.removeEventListener("scroll",this.handleScroll);
},
methods:{
/**滚动事件*/
handleScroll(){
//获取页面滚动条的高度
letscrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;
letoffsetTop=this.getOffsetTop(this.$refs.elTabs);
this.isFixed=scrollTop>offsetTop;
}
}

同时如果这种吸顶方式在项目中会多次用到，就可以封装成组件的形式

三、使用getBoundingClientRect().top**

还有一种更为直接的方式，可以实现吸顶效果，就是使用getBoundingClientRect().top来获取元素相对于视口（浏览器窗口）的位置，相对于offsetTop，该方法不用考虑到吸顶元素的父级元素和页面滚动条的高度，直接对该元素进行处理即可，实现如下：/*滚动事件/handleScroll(){/*getBoundingClientRect().top获取某元素距离浏览器顶部的高度，不包含滚动的距离*/lettabOffsetTop=this.$refs.stickyBox.getBoundingClientRect().top;this.isFixed=tabOffsetTop

/**滚动事件*/
handleScroll(){
/**
*getBoundingClientRect().top获取某元素距离浏览器顶部的高度，不包含滚动的距离
this.offsetTop表示的是吸顶元素距离顶部的条件值（一般项目需求是0）
*/
lettabOffsetTop=this.$refs.stickyBox.getBoundingClientRect().top;
this.isFixed=tabOffsetTop
锚点定位
点击相应的按钮，页面滚动到相应的位置，目前我知道实现该功能的方式有两种：
1.使用a标签定位2.使用js模拟锚点定位
使用a标签定位
这是一种常见的定位方式，它有两种实现方式：
1.通过href属性链接到指定元素的id
2.另一种是添加一个a标签，再将href属性链接到这个a标签的name属性
按钮1
按钮1
视图1

视图2

这种定位方式很简单，支持任意标签的定位，但是a标签的定位会改变路由的hash，如果有相关路由会进行路由跳转

使用js模拟锚点定位

通过js获取元素的scrollTop值，使其滚动到指定的位置，就能实现锚点定位效果，这里的tab切换选项，用到是的element-ui的el-tabs组件，具体实现如下：






methods:{
//获取当前元素的offsetTop
getOffsetTop(obj){
letoffsetTop=0;
while(obj!=window.document.body&&obj!=null){
offsetTop+=obj.offsetTop;
obj=obj.offsetParent;
}
returnoffsetTop;
},


tabClick(e){
let_this=this;
//获取当前选中的index以便后面滚动高亮
this.index=parseInt(e.index);
//给定一个标识，锚点事件不触发滚动
this.isScroll=false;
this.isChange=false;
//获取当前选中元素的top值（给元素绑定对应的ref值）
letoffsetTop=this.getOffsetTop(this.$refs[this.activeName]);
letscrollTop=offsetTop-this.fixedHeight;
window.scrollTo({
top:scrollTop
});
}

不得不提的一个方法就是scrollIntoView，Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内，同时还支持动态效果，但是不支持配置滚动到距离顶部的距离，会出现遮罩现象，但是很适合做会到顶部的功能

滚动高亮按钮

当用户滚动内容区时，高亮距离按钮组件最近的那个元素所对应的按钮。通过监听滚动事件，获取当前选中的tab的offsetTop值和当前页面的scrollTop值，判断向上或者向下滚动，做出不同的处理，具体如下：

//页面滚动要做的事情
handleScroll(){
letscrollTop=
window.pageYOffset||
document.documentElement.scrollTop||
document.body.scrollTop;
this.scrollTop=scrollTop;

if(!this.isScroll)return;
/**
*scrollTop页面的滚动条的高度
*offsetTop当前选中的tab元素的offsetTop
*offsetHeight当前选中元素的高度
*/
letoffsetTop=this.getOffsetTop(this.$refs[this.activeName]);
letoffsetHeight=this.$refs[this.activeName].offsetHeight;
letactuaTop=scrollTop+this.fixedHeight;
letlength=this.tabList.length;
/**
*页面滚动中根据相应位置变换选中tab
*/
if(actuaTop0){
this.index=this.index-1;
this.activeName=this.tabList[this.index].key;
}elseif(this.indexoffsetTop+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实现吸顶、锚点和滚动高亮按钮效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue实现吸顶、锚点和滚动高亮按钮效果

热门推荐

随机推荐