使用jquery限制左侧和右侧的滚动以停止过度滚动

Question

我收到了一段代码：How can i add animate effect for scrolling right and left on button click? | http://jsfiddle.net/MMyGE/

我遇到的唯一问题是它可以向左滚动太远或向右滚动太远。我正在寻找一种方法来阻止它走得太远。

我更改了它，如下所示：

<script type="text/javascript">
$(document).ready( function() {
    $("a.abc").click(function() {
        $("#container").each(function(){
            $(this).animate({"margin-left":"-=204px"},200)  
                });
    });

    $("a.def").click(function() {
                $("#container").each(function(){
                    $(this).animate({"margin-left":"+=204px"},200)
                });
    });
});
</script>

非常欢迎任何想法，建议或建议。

css代码

body {
    line-height: 1.6em;
    background-color: #0E4216;
    width: 3200px;
    overflow-x: scroll;
}

#gs {
    font-family: "Times New Roman",Serif;
    font-size: 12px;
    margin: 0px;
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

html代码

<div id="main">
    <table id="gs" summary="">
        <tbody>
            <thead>
                <tr>
                    <th scope="col">data</th>
                    <th scope="col">data123</th>
                    <th scope="col">title</th>
                    <th scope="col">title data</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text data text</th>
                    <th scope="col">data text (data text)</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                    <th scope="col">data text</th>
                </tr>
            </thead>
        </tbody>
    </table>
</div>

我试图获得由dmitry提供的方法

<script type="text/javascript">
$(document).ready( function() {

    var animationFlag = true;
    var windowW = $(window).width();
    var itemW = $('#scroller th:first').width();
    var visibleItems = parseInt(windowW / itemW, 10);
    var maxRight = ($('#scroller th').length - visibleItems) * (-204);
    $('#main').css('width', visibleItems * itemW + 'px');

    $("a.abc").click(function() {
        $("#gs").each(function(){
            if (parseInt($(this).css('margin-left'), 10) > maxRight && animationFlag) {
                animationFlag = false;
                $(this).animate({"margin-left":"-=204px"},800, function() {
                    animationFlag = true;
                });
            }
        });

    });
    $("a.def").click(function() {
        $("#gs").each(function(){
            if (parseInt($(this).css('margin-left'), 10) < 0 && animationFlag) {        
                animationFlag = false;
                $(this).animate({"margin-left":"+=204px"},800, function(){
                    animationFlag = true;
                });
            }
        });

    });
});
</script>

已编辑的HTML代码段

<div id="main">
    <table id="gs" id="scroller"> 

任何人都可以提供任何建设性意见或帮助吗？

Answer 1

如果您正在寻找阻止它的方法，您可以使用类似这样的修改： [http://jsfiddle.net/MMyGE/127/]

带标志选项的动画：[http://jsfiddle.net/MMyGE/128/] [1]

Answer 2

原因是你的div中有硬编码的宽度值。

Answer 3

我知道你在找什么：[http://jsfiddle.net/MMyGE/138/]