jquery - 在鼠标悬停时使垂直列表滚动

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 小提琴演示。

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

为了使它更实用，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));

});