vue中的锚点定位


在这里插入图片描述

锚点定位与平滑滚动反定位支持

代码如下
html
<div style="display: flex;height: 442px;">
                       <el-tabs v-model="activeTabs" class="zxtabsStyle" tab-position="left" @tab-click="tabshandleClick">
                        <el-tab-pane label="主要致险情景" name="zxqj"></el-tab-pane>
                        <el-tab-pane label="风险防控基本要求" name="yq"></el-tab-pane>
                        <el-tab-pane label="管理措施" name="glcs"></el-tab-pane>
                       </el-tabs>
                       <div>
 //要切换滚动的内容区域
<div class="con_tab" ref="content">
	<div id="zxqj" class="conBlock">介绍</div>
	<div id="yq" class="conBlock">课程目录</div>
	<div id="glcs" class="conBlock">课后福利</div>
</div>
js
mounted(){
//1.mounted里面自动监听滚动事件   代码如下
this.$refs.content.onscroll = ()=>{
     this.handleScroll();
 }
},
methods:{
        handleScroll () {
     let scrollTop = this.$refs.content.scrollTop;
      let blocks = document.querySelectorAll('.conBlock');
      blocks.forEach((item, index) => {
        console.log("blocks",item.id)
          if (scrollTop >= item.offsetTop) {
              this.activeTabs = item.id;
          }
      })
  },
         tabshandleClick(data){
            console.log("data",data)
            let index=Number(data.index)
    let blocks = document.querySelectorAll('.conBlock');
    let step = 40;//滚动步长
    let currentScrollTop = this.$refs.content.scrollTop;
    let targetOffsetTop = blocks[index].offsetTop;
    console.log("currentScrollTop",currentScrollTop);
    console.log("targetOffsetTop",targetOffsetTop);
    if(currentScrollTop > targetOffsetTop){
        const smoothUp = ()=>{
            if(currentScrollTop >= targetOffsetTop){
                if (currentScrollTop - targetOffsetTop >= step) {
                    currentScrollTop -= step;
                    setTimeout(smoothUp,1);
                } else {
                    currentScrollTop = targetOffsetTop-step;
                }
                this.$refs.content.scrollTop = currentScrollTop;
            }
        };
        smoothUp();
    }else{
        const smoothDown = ()=>{
            if (currentScrollTop <= targetOffsetTop) {
                // 如果和目标相差距离大于等于step 就跳 step
                if (targetOffsetTop - currentScrollTop >= step) {
                    currentScrollTop += step;
                    setTimeout(smoothDown,1);
                } else {
                    // 否则直接跳到目标点,防止跳过
                    currentScrollTop = targetOffsetTop-step;
                }
                this.$refs.content.scrollTop = currentScrollTop;
            }
        };
        smoothDown();
    }
},
}


  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值