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、因为监听 会有所卡顿

相关推荐
半桔1 分钟前
【Linux手册】从接口到管理:Linux文件系统的核心操作指南
android·java·linux·开发语言·面试·系统架构
nightunderblackcat10 分钟前
新手向:实现ATM模拟系统
java·开发语言·spring boot·spring cloud·tomcat·maven·intellij-idea
开开心心就好12 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
笑衬人心。20 分钟前
Java 17 新特性笔记
java·开发语言·笔记
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
序属秋秋秋1 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
ruan1145142 小时前
MySQL4种隔离级别
java·开发语言·mysql
quant_19863 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
百锦再7 小时前
详细解析 .NET 依赖注入的三种生命周期模式
java·开发语言·.net·di·注入·模式·依赖