jquery - 限制此自定义导航的水平滚动

Question

我使用 jquery 创建了一个水平滚动条，它有左右按钮。

<div id="container">
<ol>
    <li class="a"></li>
    <li class="b"></li>
    <li class="c"></li>
    <li class="d"></li>
    <li class="e"></li>
</ol>
</div>

<button id="left">left</button>
<button id="right">right</button>

容器具有相对定位的 overflow hidden ，内容通过以下 jquery 向左或向右移入或移出 View :

$('#left').on('click',function(){
    $('ol').css('left','-=100px');
});

$('#right').on('click',function(){
    $('ol').css('left','+=100px');
});

问题是这些函数是无限的，你可以一直点击，它们会在屏幕外越来越远。我想限制它，以便一旦没有更多的对象可以进入 View 时，该函数就会执行其他操作。

我想有很多方法可以做到这一点，但我认为没有一种方法看起来那么优雅。例如，计算容器的大小和内部元素的宽度总和，记录每个按钮被按下的次数，并在每次按下按钮时进行一些常量计算。

I've made a JS fiddle of this if I've not explained it very well.

理想情况下，在该示例中，您永远不会看到粉红色 block 。

Answer 1

你只需要 if 语句:

$('#left').on('click',function(){
    if ($('ol').css('left') != '0px') {
         $('ol').css('left','-=100px');
    }
});


$('#right').on('click',function(){
    if ($('ol').css('left') != '300px') {
        console.log($('ol').css('left'));
         $('ol').css('left','+=100px');
    }
});

http://jsfiddle.net/kqhNr/4/