html锚点反向联动,小程序菜单左右联动

最近做小程序的时候，产品提了一个需求：

1.左侧的菜单栏和右侧的菜单可分别滚动，滚动左侧不影响右侧，滚动右侧左侧随之联动高亮显示所在的菜单分类。

2.点击下方左侧导航菜单栏，高亮显示被点击的菜单分类，右侧分类类别滚动到右侧顶部(类似于 HTML 里的锚点功能)。

3.滚动右侧菜品分类详情时，当该分类详情模块顶部接触到滚动区域的顶部，左侧对应的导航菜单栏高亮，并且显示在可视区域。

如图

因为之前用vue做过一次这个效果，用了better-scroll，在小程序中不支持。于是上网开始找资料。

过程踩了很多坑，这里不一一说了，直接说实现(PS：我用的是mpvue框架)：

html部分：使用scroll-view组件，不了解的可以去看官方文档scroll-view

左侧的部分基本代码实现：

左侧菜单

右侧的代码基本实现：

右侧

接下来是JS部分

思路：

1.首先获取左侧的菜单和右侧的分类类别的高度，使用wx.createSelectorQuery().selectAll

2.将右边的每个类别的高度获取后，将高度累加，形成一个区间

3.左侧点击实现，利用scroll-into-view实现类似于锚点的效果，然后利用scroll-top的属性是左侧高亮的部分始终保持在视图区。因为scroll-into-view会引起右边的滑动，所以利用checkFlag限制右侧的scroll事件函数的执行。

左侧点击事件

4.右侧的实现，如上所说，利用checkFlag限制右侧的scroll事件函数的执行。然后进入循环，根据scroll事件里面的scrollTop的高度与获取的右侧分类的高度区间的值进行比对，记录index的值，然后高亮显示左侧，并且左侧上滑对应的距离，保证左侧高亮在可视区域。

右侧滚动实现

以上是左右联动的基本实现，如有bug和可以改进的地方，敬请指正，不胜感激！