1、关键代码

// 滚动时触发
bindscroll({detail: {scrollTop}}) {
	let that = this,
	titleContenData = that.data.titleContenData;

	// 防抖
	// timer定义在全局
	// 如果没有防抖会触发许多次
	// 对性能不友好
	if (timer !== undefined) clearTimeout(timer);

	timer = setTimeout(function () {
		// 当右侧滚动到顶部时强制赋值为0
		// 因为在滚动时一般获取到的数据是0-10的范围
		// 小概率会获取到0
		// 因为原先存储viewTop属性的第一个值就是0
		scrollTop = scrollTop < 10 ? 0 : scrollTop;
		let selectIndex = titleContenData.findIndex((item) => item.viewTop >= scrollTop);
		that.setData({
			// 设置高亮
			selectIndex,
			// 此属性联动左侧滚动条
			// 当右侧滚动时
			// 左侧也会相应的滚动
			// 只是滚动的距离不一样
			scrollTop: 5 * that.data.selectIndex
		});
	}, 100);
}

微信小程序有两个版本，此处展示柔和版的代码，还有一个版本是生硬版。两个版本的区别在于右侧滑动（滚动）时，页面动画和定位的位置不同，建议使用柔和版。两个版本存在的共同问题是，当内容倒数部分如果数据比较少，首次点击左侧倒数部分的标签会发生回跳到对应位置，此问题暂未解决。

2、完整代码

1、gitee(码云) - develop分支 - leftAndRightColumnsSoft 文件夹-柔和版
2、gitee(码云) - develop分支 - leftAndRightColumnsStiff 文件夹-生硬版