1

是否可以让父 div 可滚动（溢出：自动），但子 div 不可滚动？不，我不能使用“位置：固定”，因为它将它固定到视口。我需要将子 div 修复为父 div。

代码示例：

#pagecontainer {
    overflow:auto;
    width:1000px;
    height:450px;
}
#pagecontainer>div{   /*each of the pages*/
    margin-top:50px;
    padding-left:50px;
    padding-right:50px;
    position:relative;
}
.unscrollable{
    position:absolute;
    width: 250px;
}
.scrollable{
    margin-left:300px;
    float:left;
}

HTML

<div id="pagecontainer">

    <div id="page1">

        <div class="unscrollable"> <!--UNSCROLLABLE-->
            <a href="#page1" class="link">Link 1</a>
            <p>
            <a href="#page2" class="link">Link 2</a>
            <p>
            <a href="#page3" class="link">Link 3</a>
            <p>
            <a href="#page4" class="link">Link 4</a>
            <p>
        </div>

        <div class="scrollable"> <!--SCROLLABLE-->
            content content content
        </div>

    </div>

    <div id="page2">

        <div class="unscrollable"> <!--UNSCROLLABLE-->
            <a href="#page1" class="link">Link 1</a>
            <p>
            <a href="#page2" class="link">Link 2</a>
            <p>
            <a href="#page3" class="link">Link 3</a>
            <p>
            <a href="#page4" class="link">Link 4</a>
            <p>
        </div>

        <div class="scrollable"> <!--SCROLLABLE-->
            content content content
        </div>

    </div>

</div>

我不能只制作子 div .scrollable overflow:auto（这确实会修复.unscrollable），因为由于 50px 的边距，滚动条将有 50px 的间隙，并且它只会相对于 .scrollable 滚动。我需要滚动条打开#pagecontainer，或者#page1/#page2也可以。

我也不能放在.unscrollable外面#pageX。我需要将代码组织起来，.unscrollable是每一页的一个部分。如果我放在.unscrollable外面#pageX，那么我需要为每个页面创建一个不可滚动的ID，即#unscrollable1 #unscrollable2，然后在我想显示该页面时调用( #page1, ).fadeIn()，而不是简单的( ).fadeIn()。这将变得令人难以置信的混乱。所以底线是 div 的结构不能改变。#unscrollable1#page1

我需要的是一些 javascript/jQuery 函数，它可以.unscrollable固定#pagecontainer或#page1/#page2覆盖任何 css，例如 ( .unscrollable).fixTo( #pagecontainer)（如果存在）。

4

2 回答 2

0

要将 child 固定到 parent div，请尝试position: relative在 parentdiv和position: fixedchild 上使用div。

然后，您对子项div（top、bottom​​、、left和right）所做的所有定位都将相对于父项div。

于 2013-03-05T04:39:55.143 回答
0

我创建了一个 jsfiddle，展示了一种可能的解决方案。 http://jsfiddle.net/SF7nr/

我删除了可滚动的浮动并设置了 amax-height和 anoverflow: auto;来激活滚动。

出于布局原因，我还为页面本身设置了最小高度。一探究竟。

于 2013-03-05T09:36:21.333 回答