Question

是否可以让父div可滚动（overflow：auto），但是子div不可滚动？不，我不能使用“position：fixed”，因为它将它固定到视口。 我需要将子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，{ {1}}）。fadeIn（）当我想要显示该页面时，而不是简单地（#unscrollable1）。fadeIn（）。这将变得难以置信地凌乱。 所以底线是div的结构无法改变。

我需要的是一些javascript / jQuery函数，它使#page1固定为.unscrollable或#pagecontainer / #page1覆盖任何css，类似于（#page2 ）.fixTo（.unscrollable）如果存在。

Answer 1

要将孩子修复为父div，请尝试使用position: relative上的div和孩子position: fixed上的div。

然后，您对孩子div（top，bottom，left和right）所做的所有定位都将与父{{1}相关1}}。

Answer 2

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

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

出于布局原因，我还为页面本身设置了最小高度。看看这个。

父div可滚动，子div不可滚动？

2 个答案: