在 DIV 中水平滚动动画的行为很奇怪答案

【问题标题】：scrolling animation horizontally within DIV is behaving weird在 DIV 中水平滚动动画的行为很奇怪
【发布时间】：2012-12-24 03:52:21
【问题描述】：

我正在尝试使水平滚动锚定在 DIV 内。如果我只是为整个身体标签设置动画但似乎对我来说在 DIV 中不起作用。

这是 javascript

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>      

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

                $(".scroll").click(function(event){     
                    event.preventDefault();
                    $('#wrapper').animate({scrollLeft:$(this.hash).offset().left}, 500);
                });
            });
    </script>

这是 Html

<body>
    <div id="wrapper">
    <div id="wrappercontent">
    <div id="section1" class="section">

        <img src="images/big_head.png" />

    </div>
    <div id="section2" class="section">
        <img src="images/whatis.png" />

    </div>
    <div id="section3" class="section">
        <h2>Section 3</h2>
        <p>
            blahblahblabh

        </p>

    </div>
    </div>
 <div id="nav">
            <li><a href="#section1" class="scroll">1</a></li>
            <li><a href="#section2" class="scroll">2</a></li>
            <li><a href="#section3" class="scroll">3</a></li>
        </div>

        </div>
</body>

这是样式表

    *{
    margin:0;
    padding:0;
}
body{
    background:#f0efe4;
    letter-spacing:-1px;
     font-family:Georgia;
    font-size: 34px;
    font-style: italic;
    width:12000px;
}
#wrapper{
    width:1000px;
    height:700px;

    overflow:scroll;
}
#wrappercontent{
    height:auto;
    width:12000px;

}

#nav{
    z-index:1;
    position:fixed;
}
.section{
    margin:0px;
    bottom:0px;
    width:4000px;
    float:left;
    height:100%;
    text-shadow:1px 1px 2px #f0f0f0;
}

它的行为很奇怪。请帮忙

【问题讨论】：

标签： javascript jquery navigation scroll jquery-animate

【解决方案1】：

您只需要在计算中考虑当前滚动位置：

scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left

演示： http://jsfiddle.net/brianpeiris/h6hvq/

【讨论】：