vue 描点定位以及滚动描点定位

<template>
	<div class="main" >
		<div class="Navigation">
			<!-- 导航 -->
			<div class="Navigationtitle">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleOpen">
				  <el-menu-item index="1" @click="jump(0)">处理中心</el-menu-item>
				  <el-menu-item index="2" @click="jump(1)">我的工作台</el-menu-item>
				  <el-menu-item index="3" @click="jump(2)">消息中心</el-menu-item>
				  <el-menu-item index="4" @click="jump(3)">订单管理</a></el-menu-item>
				</el-menu>
			</div>
			<!-- 内容 -->
			<div class="content" @scroll="onScroll">
				<div class="dw" id="aaa">1</div>
				<div class="dw" id="aaa">2</div>
				<div class="dw" id="aaa">3</div>
				<div class="dw" id="aaa">4</div>
			</div>
		</div>
		<!-- 右下角导航 -->
		<div class="lowerRight">
			
			<span :class="xzcd === '1' ? 'typefacexz' : 'typeface'" @click="jump(0)"><!-- <i class="el-icon-right" v-show="xzcd === '1'"></i> -->处理中心</span>
			<span :class="xzcd === '2' ? 'typefacexz' : 'typeface'" @click="jump(1)">我的工作台</span>
			<!-- <span :class="xzcd === '2-1' ? 'secondxz' : 'second'" @click="handleSelect('2','2-1')">选项1</span>
			<span :class="xzcd === '2-2' ? 'secondxz' : 'second'" @click="handleSelect('2','2-2')">选项2</span>
			<span :class="xzcd === '2-3' ? 'secondxz' : 'second'" @click="handleSelect('2','2-3')">选项3</span> -->
			<span :class="xzcd === '3' ? 'typefacexz' : 'typeface'" @click="jump(2)">消息中心</span>
			<span :class="xzcd === '4' ? 'typefacexz' : 'typeface'" @click="jump(3)">订单管理</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				 activeIndex: '1',//默认菜单
				 xzcd: '1'//右下角选中菜单
			}
		},
		mounted() {
		    window.addEventListener("scroll", this.onScroll);
		  },
		  // 离开这个页面销毁滚动条事件，不然会给每一个页面都触发
		  beforeDestroy() {
		    window.removeEventListener("scroll", this.onScroll);
		  },
		methods: {
//点击导航描点
			jump(index) {
				  var items = document.querySelectorAll("#aaa");
				  for (var i = 0; i < items.length; i++) {
					if (index === i) {
					  items[i].scrollIntoView({
						block: "start",//默认跳转到顶部
						behavior: "smooth"//滚动的速度
					  });
					}
				  }
			},
//滚动描点
			onScroll(e) {
				  let scrollItems = document.querySelectorAll('#aaa')
				  for (let i = scrollItems.length - 1; i >= 0; i--) {
					// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
					let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
					if (judge) {
						this.activeIndex = (i+1).toString();
						this.xzcd = (i+1).toString();
					  break
					}
				  }
				  // 滚动条触底了
				  // if (e.srcElement.scrollTop + e.srcElement.offsetHeight === e.srcElement.scrollHeight) {
				  //   this.activeIndex = '4';
				  //   this.xzcd = '4';
				  // }
			},
			handleOpen(key, keyPath) {
			     this.activeIndex = key;
				 this.xzcd = key;
			},
		    handleSelect(key,xzcd) {
		        this.activeIndex = key;
				this.xzcd = xzcd;
		    },
		}
	}
</script>

<style lang="less" scoped>
	
	
	.main {
		min-width: 1256px;
		box-sizing: border-box;
		position: relative;
		display: flex;
		
		.Navigation {
			flex: 1;
			display: flex;
			flex-direction: column;
			
			.Navigationtitle {
				width: 100%;
				position: fixed;
				z-index: 9999;
				height: 60px;
			}
			//响应式布局  1080
			@media screen and (min-width : 1366px){
				.content {
					width: 80%;
					margin: 0 auto;
					min-width: 1366px;
				}
			}
			
			//响应式布局  1080
			@media screen and (max-width : 1366px){
				.content {
					min-width: 1256px;
					margin-right: 110px;
				}
			}
			.content {
				position: fixed;
				top:0px;
				left: 0;
				right:0;
				bottom: 0;
				overflow: auto;
				margin-top: 60px;
				.dw {
					height: 400px;
				}
			}
			
			::-webkit-scrollbar {
			  height: 0;
			  width: 0;
			  color: transparent;
			}
		}
		
		.lowerRight {
			position: fixed;
			z-index: 9999;
			bottom: 30px;
			right: 30px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			.typeface {
				margin: 5px 0px;
				font-size: 16px;
				font-weight: bold;
				cursor: pointer;
			}
			
			.typefacexz {
				margin: 5px 0px;
				font-size: 16px;
				font-weight: bold;
				color: #4b85f1;
				cursor: pointer;
			}
			
			.second {
				margin: 5px 0px;
				font-size: 16px;
				cursor: pointer;
			}
			
			.secondxz {
				margin: 5px 0px;
				font-size: 16px;
				color: #4b85f1;
				cursor: pointer;
			}
		}
		
		//响应式布局  1366
		@media screen and (max-width : 1366px){
			.lowerRight {
				position: fixed;
				z-index: 9999;
				bottom: 30px;
				right: 0px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	
</style>

效果图：