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

Question

是否可以让父 div 可滚动(溢出:自动)，但子 div 不可滚动？不，我不能使用“position:fixed”，因为这会将它固定到视口(viewport)。 我需要将子 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)，因为那样的话由于 margin 为 50px，scrollbar 会有 50px 的间隙，它只会相对于 .scrollable 滚动。我需要滚动条位于 #pagecontainer 上，或者 #page1/#page2 也可以。

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

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

Answer 1

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

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

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