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

Javascript 如何在鼠标事件上上下滚动列表,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想上下滚动列表,但它不工作 JSFiddle: 下面是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-l

我想上下滚动列表,但它不工作

JSFiddle:

下面是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();
    });
var total=$('ul.item-list li')。长度;
var$totalImgs=$('ul.item-list li');
高度=0;
对于(x=0;x
  • 将此CSS用于div-overflow:scroll
  • 然后它会滚动,所有列表项都会出现在您的div标签中

什么特别不起作用?你有什么错误吗?请做一个适当的小提琴并发布它,以便你需要所有列表只在浅灰色部分上下滚动滚动滚动列表不主要溢出:隐藏并在悬停事件#down div时滚动到顶部…我不想使用滚动条+1@Sumit,有什么方法可以做到这一点,需要滚动,但不是scrollbar。overflow-y:scroll或auto随scrollbar一起提供。您可以使用它。这在chrome上可以正常工作,但不一定适用于其他浏览器。如果您设置overflow-y:scroll;也可以添加-webkit scrollbar。不需要javascript#元素::-webkit scrollbar{display:none;}