jquery - 如何固定div在父div中的位置？

Question

我正在尝试创建包含可滚动内容的 div。为此，我创建了一个 overflow hidden 内容的父 div，并且我有两个 div 允许用户滚动浏览子内容。问题是我的两个允许用户滚动的 div 在单击时正在移动。我希望他们的位置固定在父 div 中。

如果这没有意义，请查看下面的 jsFiddle。当您单击显示“向下!”的文本时您会看到页面上的所有内容(包括“向下!”文本)都向下移动。我想“打倒!”留在原地。

http://jsfiddle.net/4ecA7/

到目前为止，这是我尝试过的:

<div id="container">
    <div id="up">UP!</div>
    <div id="down">DOWN!</div>
    <div id="content">
        Scrolling content       
    </div>
</div>

CSS:

#container
{
 height:200px;
 width:400px;   
 position:relative;
 overflow:hidden;
}

#up
{
    position:absolute;
    top:3px;
    left:3px;
}
#down
{
    position:absolute;
    bottom:3px;
    left:3px;
}
#content
{
 left:80px;   
 position:relative;
}

jQuery:

    $(document).ready(function () {

        $("#up").click(function () {
            $("#container").animate({ scrollTop: $("#container").position().top - 40 }, 500);
            //$("#container").position().top - 40.scrollTop();
        });

        $("#down").click(function () {
            $("#container").animate({ scrollTop: $("#container").position().top + 40 }, 500);
        });
   });

Answer 1

我构建了一个简单的 jsFiddle展示我的(新)方式。我觉得我成功了。

重点是在滚动内容之外有 2 个 div，在本例中是 position: absolute; 仅仅是为了美观。它控制内容但不随内容滚动。