左右联动布局效果

 效果图：

const stepList = ref([
  { title: '基础信息', id: 'JCxx' },
....
  { title: '资产信息', id: 'ZCxx' },
  { title: '补贴信息', id: 'BTxx' },
  { title: '信用评价', id: 'XYxx' }])

const scrollMenuRef = ref(null)
//计算右侧可滚动区域高度
const calcScrollHeight = computed(() => clientHeight.value - 390)
const clientHeight: any = ref(document.documentElement.clientHeight || document.body.clientHeight)
watch(clientHeight, (newVal, oldVal) => {
  return newVal
})
let right = ref(null); // 右边 列表盒子
onMounted(() => {
  window.onresize = () => {
    clientHeight.value = `${document.documentElement.clientHeight}`;
  }
})



const stepTag = ref(1) //标识是点击滚动还是滚轮滑动滚动
const rightRef = ref()

//点击滚动  //待完善功能是否到底部不可点击或者滚动
const stepClick = (item: any, index: number) => {
  let ind = Number(item.index)
  var id = "#" + stepList.value[ind].id
  stepTag.value = 1
  if (activeStep.value - ind == 0) return
  activeStep.value = ind
  //监听滚动条是否到底部
  const curDom: any = document.querySelector(id);
  const dom: any = document.getElementById('scrollContent');
  if (curDom) {
    document.querySelector(id).scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "nearest",
    });
  }
}

//右侧内容滚动方法
const onScroll = (e:any) => {
  if (stepTag.value == 1) return
  let scrollItems: any = document.querySelectorAll(".scroll_content");
  // console.log(e, scrollItems,scrollItems[0].offsetTop,'ee')
  for (let i = scrollItems.length - 1; i >= 0; i--) {
    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离 e.target.scrollTop
    let judge = e.scrollTop >= scrollItems[i].offsetTop - 100 - scrollItems[0].offsetTop;
    if (judge) {
      activeStep.value = i;
      break;
    }
  }
}
// 是否是右侧滚动
const handleWheel = (e) => {
  stepTag.value = 0
}