Question

我想创建一个固定高度的垂直菜单，当您按箭头时，它会上下滑动。

我无法理解如何使用偏移来知道跳转到哪里。现在我从下一个项目中获取相对偏移并跳转到那里。但它没有做它应该做的事情。而且，这不正确。我想我必须知道UL的底部是否显示在div中。如果是这样，向下箭头不再需要移动。但我怎么知道？

    //get next element
    var offsetNextLi = jQuery($nextElement).position();

    $liScrolledto = $nextElement;

    jQuery("ul#inline_navigation").animate({
        scrollTop: offsetNextLi.top
    }, 500);

这是我的小提琴：

http://jsfiddle.net/GxL8v/

Answer 1

偏移量是相对的，但是您的示例具有恒定的li高度，因此您可以使用常量步进。或者计算下一个不可见的外部li元素。要做到这一点，我会勉强一点点。 http://jsfiddle.net/GxL8v/3/

(function($) {
$(document).ready(function () {
     //SLIDE UP
    jQuery("#arrowup").on("click", function () {
        var $ul = $('#inline_navigation');
        var y = $ul.scrollTop();
        var $firstChild = $ul.children().first();
        var step = $firstChild.outerHeight() + parseInt($firstChild.css('marginBottom'),10);

        console.log('before up', y, step);
        if (y >= 0) {
            y -= step;
            console.log('after up', y);

            $ul.stop().animate({
                scrollTop: y
            }, 100);
        }
    });

    //SLIDE DOWN
    $("#arrowdown").on("click", function () {
        var $ul = $('#inline_navigation');
        var y = $ul.scrollTop();
        var h = $ul.height();
        var $firstChild = $ul.children().first();
        var step = $firstChild.outerHeight() + parseInt($firstChild.css('marginBottom'),10);

        console.log('before down', y, step);
        if (h >= y) {
            y += step;
            console.log('after down', y);

            $ul.stop().animate({
                scrollTop: y
            }, 100);
        }
    });

});
}(jQuery));

这段代码没有经过优化，只是出于教学原因。代码在每次单击时查找“ul”列表，y变量get是jQuery的scrollTop（）函数的相对坐标。例如，步骤也可以是常数59，或者在计算之前我感到悲伤。

然后检查y是否在顶部或向下打破边界，因此它向下查找高度，并向上检查y与0。上下几乎相同，只有符号从+变为 - 。

希望这会有所帮助。代码可以更加可重用和优化，与按键相同。

制作垂直UL滑块

1 个答案: