Question

我需要做一些简单的垂直旋转木马。在hover和scroll我需要将内部ul滚动到下一个或上一个li元素（它取决于滚动方向），更改类current以获取当前因此，对于上一个和下一个元素，元素和类prev和past。

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

问题是scrollHeight始终具有相同的值。

Answer 2

您需要根据当前滚动的位置增加滚动。现在你没有考虑到你在哪里而重新分配。像这样：

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

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

滚动仅适用于第一个元素

2 个答案: