Javascript物理/吸引数学

这可能是通过看小提琴最好的理解，但我想要实现的总体想法是一个平滑的卷轴，具有各种“捕捉”吸引点

用户将使用鼠标/触摸板滚动，创建一个增量值，然后将这些值加在一起，得到一个目标值，从这里开始，我逐渐向该值靠拢（这是为了让人们通过单击鼠标滚轮来平滑滚动）。一旦滚动开始，我希望它捕捉到不同的点。我已经计算了对这些点的吸引力，但是当它和我从上面的放松结合在一起时，它并没有按照预期的那样工作

var aEl=document.getElementById（'a'）；
var bEl=document.getElementById（'b'）；
草图。创建({
设置：函数（）{
此范围={
分:0,，
最多：10000
};
该值为0.1；
此参数为当前值={
p:0,，
t:0，
f:0
};
this.attractors=[]；
this.attractionRadius=（this.range.max/5）；
对于（var i=0，x=0；x=i*（this.range.max/4），i<5；i++）{
这个。吸引子。推（x）；
}
window.addEventListener（'mousewheel'，this.onMouse.bind（this））；
},
绘图：函数（）{
var w=（this.current.p/this.range.max）*this.width；
this.fillStyle='black'；
this.fillRect（0，0，w，this.height）；
this.attractor.forEach（函数（吸引子）{
var x=（吸引子/this.range.max）*this.width；
this.beginPath（）；
弧（x，this.height，10，0，Math.PI*2，false）；
this.fillStyle='red'；
这个；
}.约束（这个）；
},
更新：函数（）{
var_this=这个；
this.attractor.forEach（函数（吸引子，索引）{
var delta=吸引子-_this.current.p；
var absDelta=Math.abs（delta）；
如果（absDelta<_此吸引半径）{
//计算朝向每个吸引点的力。
_this.current.f+=delta*（1-absDelta/_this.attractionRadius）；
}
});
log（this.current，（this.current.t-this.current.p）*this.p）；
//再加上我们的力量，我想这就是错误所在？
this.current.f+=（this.current.t-this.current.p）*this.p；
this.current.p+=this.current.f；
//重新设置部队。
此.current.f=0；
},
//从用户滚动位置设置目标，限制在上面设置的范围内。
onMouse：函数（事件）{
var delta=event.wheelDeltaY；
这个.current.t+=delta；
这个.current.t=
this.current.tthis.range.max？this.range.max：
这个.current.t；
event.preventDefault（）；
}
});
*{
保证金：0；
填充：0；
}
jsfiddle-link.“不按预期工作”意味着我们知道您想要什么，这里的情况几乎不是这样。请详细说明代码到底是如何出错的，以及您希望它做什么。“我想要实现的总体想法是一个平滑的卷轴，带有各种“捕捉”吸引点”。我希望它平滑滚动，然后被吸引到吸引点（用红色圆圈标记）。它就像一个线性粒子吸引系统。因此，假设滚动条是一个粒子，当用户滚动时移动，但被吸引到点上。没有用户滚动的输入，它应该停在其中一个点上。