vue2点击tabs 滚动指定位置 仔细看Ref 绑定的是Ref 来滚动

<template>
	<div>
	  <div style="background-color: #e9e9e9; display: flex">
		<div class="form-container" ref="formContainer">
		  <div>
			<div style="background-color: #fff">
			  <div class="main-title" ref="baseInfoTitle">
				<div style="display: flex; align-items: center">
				  <div class="title-font"></div>
				  <span>基础信息</span>
				</div>
			  </div>
			  <div style="padding: 20px">
				<div style="height: 800px;"></div>
			  </div>
			</div>
		  </div>
		  <div>
			<div style="background-color: #fff">
			  <div class="main-title" ref="advantageInfoTitle">
				<div style="display: flex; align-items: center">
				  <div class="title-font"></div>
				  <span>优势信息</span>
				</div>
			  </div>
			  <div style="padding: 20px">
				<div style="height: 500px"></div>
			  </div>
			</div>
		  </div>
		  <div>
			<div style="background-color: #fff">
			  <div class="main-title" ref="licenseInfoTitle">
				<div style="display: flex; align-items: center">
				  <div class="title-font"></div>
				  <span>证照信息</span>
				</div>
			  </div>
			  <div style="padding: 20px">
				<div style="height: 800px;"></div>
			  </div>
			</div>
		  </div>
		</div>
		<div
		  style="background-color: #fff; margin-left: 10px; display: flex; flex-direction: column;"
		  class="main-right"
		>
		  <span
			:class="{ active: activeSection === 'baseInfoTitle' }"
			@click="scrollToSection('baseInfoTitle')"
		  >
			基础信息
		  </span>
		  <span
			:class="{ active: activeSection === 'advantageInfoTitle' }"
			@click="scrollToSection('advantageInfoTitle')"
		  >
			优势信息
		  </span>
		  <span
			:class="{ active: activeSection === 'licenseInfoTitle' }"
			@click="scrollToSection('licenseInfoTitle')"
		  >
			证照信息
		  </span>
		</div>
	  </div>
	</div>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		activeSection: 'baseInfoTitle'
	  };
	},
	methods: {
	  scrollToSection(section) {
		const target = this.$refs[section];
		const container = this.$refs.formContainer;
		if (target && container) {
		  container.scrollTo({
			top: target.offsetTop - container.offsetTop,
			behavior: 'smooth'
		  });
		  this.activeSection = section;
		}
	  }
	}
  };
  </script>
  
  <style scoped>
  .form-container {
	height: 680px;
	overflow-y: auto;
	width: 1100px;
  }
  .main-right span {
	padding: 10px;
	cursor: pointer;
	transition: color 0.3s, border-left 0.3s;
  }
  .main-right span:hover {
	color: #007bff;
  }
  .main-right span.active {
	color: #007bff;
	font-weight: bold;
	border-left: 4px solid #007bff;
	padding-left: 6px; /* Adjust padding to align text properly with the border */
  }
  </style>