jquery - マウスオーバーで垂直リストをスクロールさせる

Question

ナビゲーションに画面の高さよりも長い垂直リストがあります。リストにカーソルを合わせ始めると、リストは上に移動し始めますが、マウスがリストのほぼ半分にある場合に限ります。

これに関するアドバイスをいただければ幸いです。

前もって感謝します。

Answer 1

1つのアプローチは以下のとおりです。

var ul = $('ul:first'),
    ulHeight = ul.outerHeight();

ul.on('mousemove',
            function(e){
                var win = $(window),
                    cST = win.scrollTop();
                if (e.pageY>=(ulHeight/2)){
                    win.scrollTop(cST + 20);
                }
                else {
                    win.scrollTop(cST - 20);
                }
            });​

JSフィドルデモ。

これは、リスト自体の中間点に基づいているため、ページ自体に表示されている中間点に依存しています。

少し機能的にするために、ulは包含要素内にあり、スクロールはその包含要素の中間点を超えていることに基づいています。

var div = $('#wrap'),
    wrapHeight = div.height(),
    listHeight = div.find('ul').outerHeight();

div.on('mousemove',
            function(e){
                var cPointY = e.pageY,
                    cST = div.scrollTop();
                if (cPointY >= (wrapHeight/2)) {
                    div.scrollTop(cST + 15);
                }
                else {
                    div.scrollTop(cST - 15);
                }
            });​

JSフィドルデモ。

---

含まれている要素内のカーソルの位置に応じてリスト要素を上下にスクロールするオプションを追加するために編集されました。

var div = $('#wrap'),
    wrapScreenHeight = div.height(),
    wrapHeight = div.outerHeight(),
    listHeight = div.find('ul').outerHeight();

div.on('mousemove', function(e) {
    var cPointY = e.pageY,
        dP = ((cPointY / wrapHeight));
    div.scrollTop((listHeight * dP) - wrapScreenHeight);

});

JSフィドルデモ。参照：

• on()。
• outerHeight()。
• scrollTop()。

Answer 2

アニメーション化（この場合は水平）したい場合：

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        function(callback){window.setTimeout(callback, 1000 / 60);};
})();

var div = $('#menu3'),
    wrapScreenWidth = div.width(),
    wrapHeight = div.outerWidth(),
    listWidth = div.find('tr').outerWidth();
var go = 0;
function anim(){
    var act = Math.round(div.scrollLeft()),
        diff = Math.abs(act-go);
    if(diff)
        div.scrollLeft(div.scrollLeft()+ (act<go?1:-1)*diff*0.03);      
    window.requestAnimFrame(anim);                  
};

anim();

div.on('mousemove', function(e) {
    var cPointY = e.pageX,
        dP = ((cPointY / wrapHeight));
    go = Math.max(0,Math.round((listWidth * dP) - wrapScreenWidth));

});