如何使用JS做一个类似于原生的滚轮插件？

Question

需求：

上面是原生滚轮插件的效果图，现在需要用JS实现一个类似的滚轮插件。

使用过的方法：

模仿滚动我采取的方式是使用overflow:scroll的方式。这样性能是最好的但是存在以下俩种问题：

1.滑动过后并不会准确的卡在线条中间。

解决方法：当使用一个定时器检测到滚轮停止滚动了，就进行一次位置计算，不是正确位置，则设计一个动画，让其滚动到正确位置。但是动画效果不理想

2.禁用scroll事件，使用touchstart, touchmove, touchend方法计算滚动速度以及滚动位置

解决方法：监测起始位置，结束为止。当touchend事件触发的时候接管滚轮滑动，根据手指触摸距离以及触摸事件给滚轮设置一个模拟人手指滑动的动画。但是touchend事件触发并不能够接管默认的滚轮滑动

网上有一个类似的插件LArea，但是性能并不是特别理想。他采取的方式是通过touchstart, touchmove, touchend计算手指滚动的情况，然后使用transform进行页面元素位置计算。

相关代码

上图是我用JS做的滚轮插件，只完成了滚轮一部分，但是每次滚动文本信息都定位在中间还没有完成。大家可以使用这个代码快速开始
项目地址：
https://github.com/mrxu0/Whee...

Answer 1

Picker选择器，很多现成的组件可用，建议题主直接看它们的源代码研究