vue锚点

最新推荐文章于 2024-11-03 20:03:09 发布

only girl-

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量103

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/weixin_43493402/article/details/111210391

版权

左侧导航

<div class="controllerpage-main-left">
  <div class="modalLeftWrap" v-for="(item,index) in modalLeft" :key="index" @click="jump(index)">
       <a href="javascript:void(0);" :class="checkcontrollerlistNum == index? 'buttonActive': 'button'">
            <div>
                <img v-if="checkcontrollerlistNum == index" :src="item.imgActive" />
                <img v-else :src="item.imgIcon" />
            </div>
            <p>{{item.title}}</p>
        </a>
   </div>
</div>

右侧内容

<div class="controllerpage-main-right" @scroll="onScroll">
	<div class="controllerpage-right-item">
		····
	</div>
	<div class="controllerpage-right-item">
		····
	</div>
	<div class="controllerpage-right-item">
		····
	</div>
	<div class="controllerpage-right-item">
		····
	</div>
</div>

jump(index) {
      var items = document.querySelectorAll(".controllerpage-right-item");
      for (var i = 0; i < items.length; i++) {
        if (index === i) {
          items[i].scrollIntoView({
            block: "start",//默认跳转到顶部
            behavior: "smooth"//滚动的速度
          });
        }
      }
    },
    onScroll(e) {
      let scrollItems = document.querySelectorAll(".controllerpage-right-item");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        //判断滚动条是否到最底部
        let judgeBottom = e.target.scrollTop+e.target.clientHeight>=e.target.scrollHeight;
        if(judgeBottom){  //如果右侧内容高度不够 滚动条到最底部了
          this.checkcontrollerlistNum = this.modalLeft.length-1;  
        }else if(judge){
          this.checkcontrollerlistNum = i;
          break;
        }
      }
    }