Question

我正在尝试创建包含可滚动内容的div。为此，我创建了一个隐藏溢出内容的父div，我有两个div，允许用户滚动子内容。问题是我的两个允许用户滚动的div在点击时会移动。我希望他们的立场能够在父级div中保持固定。

如果没有意义，请看下面的jsFiddle。当您单击“向下”的文本时您将看到页面上的所有内容（包括“向下！”文本）向下移动。我想“下来！”留在原地。

这是我到目前为止所尝试的内容：

<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;仅为了看起来。它控制内容但不用它滚动。

Answer 2

http://jsfiddle.net/4ecA7/1/

从div内部删除它们。绝对定位使您能够定位元素：

/*CSS Change*/
#down
{
    position:absolute;
    top:185px;
    left:3px;
}

Answer 3

您的容器的position值设置为relative。这使得所有内部元素都具有absolute位置，相对于容器是绝对的，而不是页面。因此，当容器滚动时，内部div滚动。从容器中删除它们，或从容器div中删除position:relative。

如何修复父div中div的位置？

3 个答案: