如何实现XXX功能之思路系列【滚动条联动】

1. 功能效果

–

1. 左侧点击右侧可跳转(这个比较简单, 用一个better-scroll这个插件的API即可）
2. 右侧滚动, 左侧实时绑定class

---

2. 找思路

–

1. 一开始我的思路是这样的

1. 右侧滚动时, 找到菜品标题这个dom元素的一个API(相对于页面或父元素的距离)
2. 遍历每一个标题, 判断是否处在一个距离内, 然后传值给左侧
3. 测试了一圈, 发现并没有这种API, 溜了溜了

2. 好吧, 看看别人的思路

1. 还是要依赖better-scroll这个插件的API
2. 监听整个子元素的滚动, 实时得到scrollY的值
   // 这个scrollY是你相对于父元素顶部滚动了多少距离
3. 创建一个数组, 这个数组有什么呢?
   // arr[0] = 0
   // arr[1] = 第一个菜品的li标签高度
   // arr[2] = 第一个菜品的li标签高度+第二个菜品的li标签高度
   // arr[3] = 第一个菜品的li标签高度+第二个菜品的li标签高度+第三个菜品的li标签高度
   // 依次类推, 技术细节不做描述
4. 然后我们判断scrollY是否处于arr[i]与arr[i+1]的区间内, 在, 就return一个i值
5. 绑定左侧class， 根据这个i值与自身的Index做文章

---

3. 总结

–

1. 多看文档
2. 思路不通, 虚心学习别人的思路

---

To be continued