[英]non-linear scrolling
Scrolling s
is like, well, linear: 滚动s
是等,以及,线性的:
s(x) = x with x among [0, ∞]
I'd like to apply a more fancy function , say x^2
: 我想应用一个更奇特的功能 ,比如x^2
:
but I'd don't really know if it's possible and how... 但我真的不知道它是否可能以及如何......
I'd like to know your thougts on this. 我想知道你对此的看法。
EDIT 编辑
For example: is it possible to change the scrollTop
value while scrolling? 例如:是否有可能改变scrollTop
滚动时的价值?
Cheers. 干杯。
A high level approach to your problem: 解决问题的高级方法:
Compute actual velocity vA based on time to last event 根据上次事件的时间计算实际速度vA
vA(dT): // if we last scrolled a long time ago, pretend it was MinTime // MinTime is the dT which, when scrolled // at or less than, behaves linearly if (dT > MinTime) dT = MinTime vA = MinTime / dT
Devise some transformation to perform on vA to get desired velocity vD : 设计一些转换以在vA上执行以获得所需的速度vD :
vD(vA): // quadratic relationship vD = vA * vA
Calculate a "scroll factor" fS , the ratio of vD to vA : 计算“滚动因子” fS , vD与vA的比率:
fS(vD, vA): // this step can be merged with the previous one fS = vD / vA
Calculate the delta scroll dS using fS and dSi , the initial scroll size (1 scroll event's worth of scrolling) 使用fS和dSi计算delta滚动dS ,初始滚动大小(1滚动事件的滚动值)
dS(fS): dS = fS * dSi
Scroll by that much 滚动那么多
Scroll(dS)
If you scroll less than once per MinTime or slower, you will get typical linear behavior. 如果每MinTime或更慢滚动少于一次,您将获得典型的线性行为。 If you try to scroll faster, you will scroll quadratically with your actual scroll speed. 如果您尝试更快地滚动,则将以实际滚动速度平方滚动。
I have no idea how to actually do this with javascript, but I hope it provides somewhere to start. 我不知道如何用javascript实际做到这一点,但我希望它提供了一个开始的地方。
Is there a unit of scrolling I can use by any chance? 是否有一个滚动单位我可以使用任何机会? My terminology looks funny. 我的术语看起来很有趣。
This should be helpful for capturing mouse wheel 'speed': 这应该有助于捕获鼠标滚轮的“速度”:
$(document).on('DOMMouseScroll mousewheel', wheel);
function wheel (event) {
var delta = 0;
if (event.originalEvent.wheelDelta) {
delta = event.originalEvent.wheelDelta/120;
} else if (event.originalEvent.detail) {
delta = -event.originalEvent.detail/3;
}
if (delta) {
handle(delta, event.currentTarget);
}
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;
}
function handle (delta, target) {
// scrollYourPageDynamiclyWithDelta(delta*delta);
// manipulate of scrollTop here ;)
}
So this is more conceptual, but I think using the functions that others mentioned to detect scroll speed and such this could be helpful. 所以这更具概念性,但我认为使用其他人提到的功能来检测滚动速度,这样可能会有所帮助。
Logic: 逻辑:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.