javascript - 用jquery限制左右滚动以停止过度滚动

Question

我得到了一段代码：如何添加动画效果以在按钮单击时左右滚动？| 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/]