Jquery UL滚动

Question

我正在尝试使用Jquery在UL列表上滚动，并使用两个跨度来上下移动。它对一个li子级有效，但是对于一个动态填充的ul又如何呢？谢谢，我完全迷路了

 $('span.scrollDown').click(function () {
        $('.liste-grostitres li:first-child').css('margin-top', 0 - $('.liste-grostitres li').outerHeight());
        $('.liste-grostitres').css('overflow', 'hidden');
    });

    $('span.scrollUp').click(function () {
        $('.liste-grostitres li:first-child').css('margin-top', 0);
        $('.liste-grostitres').css('overflow', 'visible');
    });


<div id="grostitres">
    <div class="gInner">
    <span class="scrollUp"></span>
    <span class="scrollDown"></span>
    <div class="scrollable" id="divlist" runat="server">   
      <ul>
          <li></li>
          <li></li>
          ...
      </ul>
    </div>              
    </div>

Answer 1

这里有一个滑动开关的小提琴：http://jsfiddle.net/RMQLM/

还有工作代码示例：

HTML：

<div id="up">up</div>
<div id="list">
<ul>
    <li>foo1</li>
    <li>bar1</li>
    <li>foo2</li>
    <li>bar2</li>
    <li>foo3</li>
    <li>bar3</li>
    <li>foo4</li>
    <li>bar4</li>
    <li>foo5</li>
</ul>
</div>
<div id="down">down</div>

CSS：

div#list {
    height: 93px;
    overflow: hidden;
    border: 1px solid red;
}

jQuery：

var listcount = $('li').size();
var cli = 1;
$('#down').click(function() {
    if (cli < listcount) {
        $('li:nth-child(' + cli + ')').slideToggle();
        cli++;
    }
});
$('#up').click(function() {
    if (cli > 1) {
        cli--;
        $('li:nth-child(' + cli + ')').slideToggle();
    }
});

Answer 2

将您的UL设置为position: relative;并设置为top: 0;。

添加一个函数来处理动画：

var scroll_ul = function(offset) {
    // Target the UL to scroll
    var to_scroll = $('#divlist').find('ul');

    // Store the distance to scroll (assumes LIs are all equal height)
    var scroll_distance = $('#divlist').find('li').outerHeight(true);

    // Animate
    to_scroll.stop().animate({ top: '-=' + (offset * scroll_distance) });
};

然后更改您的点击处理程序，如下所示：

$('span.scrollDown').click(function() {
    scroll_ul(1);
});

$('span.scrollUp').click(function() {
    scroll_ul(-1);
});

如果您敲击scrollDown/scrollUp按钮，您可能会遇到奇怪的滚动距离。这时您应该研究一下jQuery的.one()函数。

Answer 3

我认为将整个UL动画化会比单个LI更有效率。您已经在DIV中包装了UL，那么为什么不相对于包装器来动画UL呢？这将与在UL中设置单个LI动画的方式相同，因此您不需要重新发明轮子。