Question

我的导航中有一个垂直列表，它比屏幕高度长。我希望这样当我开始将鼠标悬停在列表上时，列表将从向上移动开始，但只有当鼠标位于列表的一半左右时才开始。

对此的任何建议都将非常感激。

提前谢谢。

Answer 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 Fiddle demo

这是基于列表本身的中间点，因此依赖于页面本身可见的中间点。

为了使其更具功能性，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 Fiddle demo

编辑添加另一个选项，根据光标在包含元素中的位置向上或向下滚动列表元素：

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 Fiddle demo。参考文献：

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));

});

使鼠标悬停在垂直列表上滚动

2 个答案: