コンテナー div 内のマウスの位置に基づいて、コンテナー div 内の一連のオーバーフロー要素を自動スクロールする小さな jQuery プラグインに取り組んでいます。
このプラグインのアイデアは、私が少し前に書いたものを改善することです。ここの左下にある自動スクロール ナビゲーションを参照してください。これに関する古い問題は、コンテナ div の下部 (javascript パースペクティブ) 以外の場所からマウスを入力するとジャンプすることでした。
今、すべてが私のプラグインで正常に動作していますが、上からマウスを入力すると、時々失敗します（マウスをすばやく出し入れすると、確実に起こります）。内部要素をスクロールする方法を計算するために両方とも使用される mouseenter イベントと私の mousemove イベント。これが関数です。ソースの残りの部分はかなり小さく、適切にコメントされています。
projList.mousemove(function(e){
//keep it from freaking out when we mouseenter from Top of div
if(enterMouseY > divHeight){
enterMouseY = divHeight;
}
mouseY = e.pageY-projList.offset().top;
//ok that didnt work... try to keep it from freaking out when we mouseenter from Top of div
if (mouseY > divHeight){
mouseY = divHeight;
}
//distnace from top of container div to where our mouse Entered
var distToTop = divHeight - enterMouseY;
//here is the calculation, I parameterize the mouseY pos as a value between 0-1
//0 being where we entered and 1 being the top or bottom of the div
//then multiply that by how much we have to scroll to get to the end of the list
//are we moving up or down
if(mouseY>enterMouseY){
//if up calculate based on Top
var dist =totalScrollDistance * ((mouseY-enterMouseY-projList.offset().top)/(distToTop));
}else if(mouseY<enterMouseY){
//if up calculate based on Bottom
var dist =totalScrollDistance * ((mouseY-enterMouseY-projList.offset().top)/(enterMouseY));
}else if(mouseY = enterMouseY){
var dist = 0;
}
//set the position of the list offsetting wherever we left it
pos = dist+lastPos;
//scroll to that position
projList.scrollTop(pos);
//are we trying to scroll past the scrollable amount
if(pos<0){
pos = 0;
}
if(pos>totalScrollDistance){
pos = totalScrollDistance;
}
$('#div1').text("mouseY: "+ mouseY +" enterMouseY: "+ enterMouseY +" distance:"+ dist.toFixed(1) + " pos:"+ pos.toFixed(1));
});