如何使用JS做一個(gè)類似于原生的滾輪插件？

需求：

上面是原生滾輪插件的效果圖，現(xiàn)在需要用JS實(shí)現(xiàn)一個(gè)類似的滾輪插件。

使用過的方法：

模仿滾動我采取的方式是使用overflow:scroll的方式。這樣性能是最好的但是存在以下倆種問題：

1.滑動過后并不會準(zhǔn)確的卡在線條中間。

解決方法：當(dāng)使用一個(gè)定時(shí)器檢測到滾輪停止?jié)L動了，就進(jìn)行一次位置計(jì)算，不是正確位置，則設(shè)計(jì)一個(gè)動畫，讓其滾動到正確位置。但是動畫效果不理想

2.禁用scroll事件，使用touchstart, touchmove, touchend方法計(jì)算滾動速度以及滾動位置

解決方法：監(jiān)測起始位置，結(jié)束為止。當(dāng)touchend事件觸發(fā)的時(shí)候接管滾輪滑動，根據(jù)手指觸摸距離以及觸摸事件給滾輪設(shè)置一個(gè)模擬人手指滑動的動畫。但是touchend事件觸發(fā)并不能夠接管默認(rèn)的滾輪滑動

網(wǎng)上有一個(gè)類似的插件LArea，但是性能并不是特別理想。他采取的方式是通過touchstart, touchmove, touchend計(jì)算手指滾動的情況，然后使用transform進(jìn)行頁面元素位置計(jì)算。

相關(guān)代碼

上圖是我用JS做的滾輪插件，只完成了滾輪一部分，但是每次滾動文本信息都定位在中間還沒有完成。大家可以使用這個(gè)代碼快速開始
項(xiàng)目地址：
https://github.com/mrxu0/Whee...