javascript - 如何在鼠标事件上上下滚动列表

Question

我想上下滚动列表但它不起作用

JSFiddle:Demo

这是javascript代码:

   var total = $('ul.item-list li').length;
   var $totalImgs = $('ul.item-list li');

   var thumbHeight = 0;
    for (x=0; x<total; x++) {
        thumbHeight = thumbHeight + 41;
    };

    $('ul.item-list').css({height: thumbHeight + 'px'});

    $('#Up').hover(function(e){
        $('ul.item-list').stop();
        posTop = -parseInt($('ul.item-list').css("margin-top"))
        speed = (posTop) * 4;
        slideTop = thumbHeight - 50;
        $('ul.item-list').animate({"margin-top": "80px"}, 800)},function(){$('ul.item-list').stop();
    });     

    $('#Down').hover(function(e){
        posTop = parseInt($('ul.item-list').css("margin-top"))
        speed = (thumbHeight + posTop) * 4;
        slideTop = thumbHeight - 50;
        $('ul.item-list').stop();
        $('ul.item-list').animate({"margin-top": -slideTop + "px"}, speed)
        },function(){$('ul.item-list').stop();
    });

Answer 1

• 将此 CSS 用于您的 div - overflow: scroll;
• 然后它会滚动，所有列表项都会出现在您的 div 标签中