微信小程序scrollview实现商城类导航联动

最近研究小程序，想做一个商城类导航联动，只实现了一半，右侧滚动级联左侧没有做出来，百度了些代码结果滚动时会卡死，而且没怎么看懂……
可参考：https://blog.csdn.net/weixin_44314803/article/details/102872380

wxml:

<view class='main'>
  <view class='left'>
    <scroll-view scroll-y="true" scroll-with-animation="true">
      <block wx:for="{{left}}" wx:key='*this' id="select_index{{index}}">
        <view class='box {{select_index==("select_index"+index)?"active":""}}' data-index="{{index}}" bindtap='left_tap'>{{item.title}}</view>
      </block>
    </scroll-view>
  </view>

  <view class='right'>
    <scroll-view scroll-y="true"  bindscroll="scroll" scroll-with-animation="true" scroll-into-view='{{select_index}}'>
      <view class='block' wx:for="{{right}}" wx:key='*this' style="border:10px solid pink;" id="select_index{{index}}">
        <view class="title">{{item.title}}</view>
        <view class='list'>
          <block wx:for="{{item.content}}" wx:key='*this'>
            <view class="content">{{item.title}}</view>
          </block>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

.wxss:

page{
  height: 100%;
}
.main{
  height: 100%;
  display: flex;
  justify-content: space-between;
}
/* 左侧 */
.left{
  width:200rpx;
  height: 100%;
}
.left scroll-view{
  height: 100%;
  border: 1px solid green;
}

.left scroll-view .box{
  height:100rpx;
  line-height: 100rpx;
  border: 1px solid red;
}
/* 激活背景色 */
.active{
  background: #6699ff;
}
/* 右侧 */
.right{
  width:calc(100% - 230rpx);
  height: 100%;
  border: 1px solid lightblue;
}
.right scroll-view{
  height: 100%;
  border: 1px solid green;
}
.right .title{
  background: lightgrey;line-height:100rpx;
}
.right .content{
  line-height:200rpx;
}

.js:

data: {
    select_index: 'select_index0',
    scroll_height:0,
    left: [
      {
        id: 1,
        title: '选项一'
      },
      {
        id: 2,
        title: '选项二'
      },
      {
        id: 3,
        title: '选项三'
      },
      {
        id: 4,
        title: '选项四'
      },
      {
        id: 5,
        title: '选项五'
      },
      {
        id: 6,
        title: '选项六'
      },
      {
        id: 7,
        title: '选项七'
      }
    ],
    right: [
      {
        id: 1,
        title: '选项一',
        content: [{
            title: "产品一"
          },
          {
            title: "产品二"
          },
          {
            title: "产品三"
          },
          {
            title: "产品四"
          },
        ]
      },
      {
        id: 2,
        title: '选项二',
        content: [{
            title: "产品一"
          },
          {
            title: "产品二"
          },
          {
            title: "产品三"
          },
          {
            title: "产品四"
          },
        ]
      },
      {
        id: 3,
        title: '选项三',
        content: [{
            title: "产品一"
          },
          {
            title: "产品二"
          },
          {
            title: "产品三"
          },
          {
            title: "产品四"
          },
        ]
      },
      {
        id: 4,
        title: '选项四',
        content: [{
            title: "产品一"
          },
          {
            title: "产品二"
          },
          {
            title: "产品三"
          },
          {
            title: "产品四"
          },
        ]
      },
      {
        id: 5,
        title: '选项五',
        content: [{
            title: "产品一"
          },
          {
            title: "产品二"
          },
          {
            title: "产品三"
          },
          {
            title: "产品四"
          },
        ]
      },
      {
        id: 6,
        title: '选项六',
        content: [{
            title: "产品一"
          },
          {
            title: "产品二"
          },
          {
            title: "产品三"
          },
          {
            title: "产品四"
          },
        ]
      },
      {
        id: 7,
        title: '选项七',
        content: [{
            title: "产品一"
          },
          {
            title: "产品二"
          },
          {
            title: "产品三"
          },
          {
            title: "产品四"
          },
        ]
      }
    ]
  },
  //左边点击事件
  left_tap: function (e) {
    console.log(e.currentTarget.dataset.index)
    this.setData({
      select_index:'select_index'+e.currentTarget.dataset.index
    })
    console.log(this.data.select_index)
  },
  // 右边scroll-view滑动事件
  scroll: function(e) {
   	var h = e.detail.scrollTop //距离顶部的滚动距离
    var scroll_height = 0;
    var select_index;
      //......
  },