js实现页面滚动时自动切换Sidebar标签,点击标签自动滚动页面

js实现页面滚动时自动切换Sidebar侧边导航标签,点击标签自动滚动页面

js 复制代码
        <van-sidebar class="sidebar" v-model="activeKey">
        	<van-sidebar-item :title="i.title" @click="onChange(i)" v-for="(i,k) in activeList" :key="k"/>
        </van-sidebar>
        <div class="filtratePopup_main">
          <div class="content" ref="anchor" @scroll="handleScroll">
            <div class="device_title" ref="device">设备配置</div>
            <div class="item_list">
              <div @click="deviceItemClick(item)"  class="item van-ellipsis" v-for="(item,index) in deviceList" :key="index">{{item.equipmentName}}</div>
            </div>
             <div class="device_title" ref="environment">环境配置</div>
            <div class="item_list">
              <div @click="deviceItemClick(item)"  class="item van-ellipsis" v-for="(item,index) in deviceList" :key="index">{{item.equipmentName}}</div>
            </div>
            <div style="height: 50vh;"></div>
          </div>

方法:

js 复制代码
methods: {
	handleScroll(v){
      let navList = document.querySelectorAll('.device_title')
      
      let navTop = []
      navList.forEach(i=>{
        navTop.push(i.offsetTop)
      })
      let scroll = this.$refs.anchor.scrollTop
      let index = 0
      navTop.forEach((i,k)=>{
        if(scroll>=i){
          index = k
        }
      })
      this.activeKey = index
    },
    
	onChange(v){
      this.$refs[v.name].scrollIntoView({ behavior: 'smooth' })
    },

注意的点:

1、如果最后一个内容过少,可能会出现点击最后一个,Sidebar导航定位到上面的问题,需要看情况加上底部内容

2、因为监听 会有所卡顿

相关推荐
江城开朗的豌豆2 分钟前
Vue组件DIY指南:手把手教你玩转自定义组件
前端·javascript·vue.js
前端小巷子31 分钟前
Cookie与Session:Web开发中的身份验证与数据存储
前端·javascript·面试
卷到起飞的数分34 分钟前
Java零基础笔记07(Java编程核心:面向对象编程 {类,static关键字})
java·开发语言·笔记
谁他个天昏地暗1 小时前
Java 实现 Excel 文件对比与数据填充
java·开发语言·excel
kaikaile19951 小时前
使用Python进行数据可视化的初学者指南
开发语言·python·信息可视化
大P哥阿豪1 小时前
Go defer(二):从汇编的角度理解延迟调用的实现
开发语言·汇编·后端·golang
意疏1 小时前
【Python篇】PyCharm 安装与基础配置指南
开发语言·python·pycharm
成遇1 小时前
Eslint基础使用
javascript·typescript·es6
GuokLiu2 小时前
250708-通过两块硬盘拷贝DeepSeek两个满血版模型的bash脚本
开发语言·chrome·bash
前端小趴菜057 小时前
React-React.memo-props比较机制
前端·javascript·react.js