js实现饿了么点餐界面左右滑动绑定

效果图：点击左侧右侧会自动定位，滑动右侧左侧也会自动定位。
源码在文章末尾，文中提供思路

整体思路

左侧和右侧列表通过索引关联起来，同时记录右侧每一项的offsetTop

方案一 ScrollTo

点击左侧对应项之后直接通过索引找右侧offset,调用ScrollTo即可，关于这个函数可以参考MDN.

方案二 锚点法

右边设置a标签 href属性设置为 foodlist+index,对应右边设置id = foodlist+index，这样就可以了。

方案二 锚点法优化scrollIntoView

锚点会改变url,这里我们间接使用，将左右的id关联起来即可，比如左边项设置点击事件，传入（index），右边id = food-list+index,左右关联起来，点击事件调用document.querySelector(‘food-list’+index).scrollIntoView(true)，同样这个方法可以参考MDN

右边滑动监听

右边只需要比较容器的ScrollTop和当前的offsetTopList(在数据获取之后计算出每一个列表的offsetTop),设置滚动监听即可

解决滑动生硬问题，

后两种方案在MDN上有实现平滑滑动的配置参数，锚点法目前还没想到。

具体实现源码实现