滾動只適用於第一個元素

Question

我需要做一些簡單的垂直旋轉木馬。上hover和scroll我需要滾動內ul到下一個或上一個li元件（這取決於滾動方向），變更類current爲當前元素和類prevpast和用於相應一個和下一個元素。

HTML

<div id="scroll"> 
    <ul> 
     <li style="background: red;"></li> 
     <li style="background: green;"></li> 
     <li style="background: yellow;"></li> 
     <li style="background: blue;"></li> 
    </ul> 
</div> 

jQuery的

$.fn.scroll = function() { 
var $this = $(this); 
var $list = $(this).find('ul'); 
var $lis = $list.find('li'); 
var count = $lis.length; 
var direction, 
currentSlidePosition; 

$this.addClass('scroll'); 
$list.addClass('slides-list'); 
$lis.addClass('slide'); 
$lis.filter(':first').addClass('current'); 
$lis.filter(':not(:first)').addClass('past'); 

var scrollHeight = $lis.eq(0).height(); 

function gotoSlide(direction) { 
    currentSlidePosition = $lis.filter('.current').index(); 

    if ((direction === 1 && currentSlidePosition === 0) || (direction === -1 && currentSlidePosition === count - 1)) { 
     return; 
    } 

    $lis.removeClass('current'); 
    $lis.eq(currentSlidePosition - direction).removeClass('past prev').addClass('current'); 
    $lis.filter('.current').prevAll().addClass('prev'); 
    $lis.filter('.current').nextAll().addClass('past'); 

    $list.animate({ 
     scrollTop: (direction === -1) ? scrollHeight : -scrollHeight 
    }, { 
     duration: 300 
    }); 
} 

$this.on('mouseenter', function() { 
    var $this = $(this); 

    $this.bind('mousewheel', function (e) { 
     if ($list.is(':animated')) { 
      return; 
     } 

     if (e.originalEvent.wheelDelta > 0) { 
      direction = 1; //up 
     } else {     
      direction = -1; //down 
     } 

     gotoSlide(direction); 
    }); 
}); 
}; 

$(document).ready(function() { 
    $('#scroll').scroll(); 
}); 

http://jsfiddle.net/Lvd90p6j/

問題是滾動工作正常只爲第一要素和其他的不工作，雖然班級的變化以正確的方式工作。有什麼問題，如何解決？

Answer 1

您需要根據當前滾動所在的位置來增加滾動。現在你正在重新分配而不考慮你在哪裏。就像這樣：

$list.animate({ 
      scrollTop: (direction === -1) ? $list.scrollTop()+scrollHeight : $list.scrollTop()-scrollHeight 
     } 

http://jsfiddle.net/m5unj2wu/1/

Answer 2

問題是scrollHeight始終具有相同的值。