当前位置: 首页 > news >正文

菜单和内容滚动的联动原理及代码

之前写代码有个需求:左侧是一个菜单,右边是内容,点击左侧菜单右边内容滚动到对应位置,右边内容滚动到某位置时,左侧菜单也会选中对应的菜单项。UI如下:这是大多网站的移动端都会有的需求。

解决方案一:

我们可以使用页面锚点的方式来操作,就是左边菜单使用<a href="#推荐1">然后右侧内容,每个模块使用id属性<div id="推荐1">如此也是可以实现页面滚动联动的。

解决方案二:

使用js操作dom:(我这里使用vue框架)但js操作DOM原理都是相通的,相比也能看懂

async getList() {//从后端获取数据let that = this;await api.axios({url: "/api/list/list"}).then((res) => {that.listData = res.list;that.listBanner = res.banner
//这里要在获取到数据后再去拿DOM,不然高度是不准确的。setTimeout(function() {
//这里使用vue的ref获取DOMlet rightItem = that.$refs.RightList.getElementsByClassName("list-item");let height = 0;
//将所有模块的高度获取到,后面点击时让右侧滚动到对应高度就行了。Array.from(rightItem).forEach(v => {height += v.clientHeightthat.allHeight.push(height)})}, 200)})
leftChange(index) { //左侧点击let scrollMax = this.rightScroll.maxScrollY; //最大滚动区间
//这个判断是因为我右侧的内容数组第一个是写死的,其他的和左侧菜单都是后端返回的if (index === 0) {this.$refs.RightList.scrollTo({top: 0})} else {this.$refs.RightList.scrollTo({top: this.allHeight[index + 1]})}this.nowIndex = index;},ScrollChange(e){//右侧滚动操作let top = this.$refs.RightList.scrollTop//console.log(top)this.allHeight.forEach((item,index,arr)=>{if(top >= arr[index]){
//这个判断是因为我右侧的内容数组第一个是写死的,其他的和左侧菜单都是后端返回的if(index===0){this.nowIndex = 0;}else{this.nowIndex = index-1;}}})}

http://www.lryc.cn/news/124359.html

相关文章:

  • Python爬虫:单线程、多线程、多进程
  • 超强的Everything,吊打系统自带文件搜索功能!
  • flink配置参数
  • 学习Vue:安装Vue.js和设置开发环境
  • 代理技术在网络安全、爬虫和数据隐私中的多重应用
  • Python 3 使用Hadoop 3之MapReduce总结
  • KU Leuven TU Berlin 推出“RobBERT”,一款荷兰索塔 BERT
  • Postern中配置和使用Socks5代理指南
  • android 窗口级模糊实现方式
  • 面试热题(数组中的第K个最大元素)
  • HTTP2协议介绍
  • 矩阵的转置
  • web集群学习:nginx+keepalived实现负载均衡高可用性
  • MFC第二十九天 CView类的分支(以及其派生类的功能)、MFC六大关键技术
  • SpringBoot复习:(37)自定义ErrorController
  • Linux学习之防火墙概述
  • JS_围绕圆形滑动
  • Ubuntu上安装RabbitMQ
  • 统计学和机器学习之间的联系和区别
  • linux中profile.d和profile的区别
  • MobaXterm sftp 不能拖拽文件夹了?
  • 【ArcGIS Pro二次开发】(59):Editing(编辑)模块
  • WebSocket与消息推送
  • 5.1 web浏览安全
  • (六)Unity开发Vision Pro——词汇表
  • 算法随笔:图论问题之割点割边
  • 【虚幻引擎】UE5数字人的创建
  • 算法:深度优先遍历
  • Stable Diffusion + Deform制作指南
  • ssm+vue网上花店设计源码和论文