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

是否可以让父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

.scrollable

溢出：auto

（这将确实修复

.unscrollable

），因为这样滚动条将有一个50px的间隙（由于50px的边距），它将仅相对于.scrollable滚动。我需要滚动条在

#pagecontainer

上，或者

#page1

/

#page2

也可以

此外，我无法将

.unscrollable

放在

#pageX

之外。我需要对代码进行组织，

。可展开的

是每页的一部分。如果我把

.uncollable

放在

#pageX

之外，那么我需要为每个页面创建一个可阅读的ID，即

#uncollable1

#uncollable2

，然后在我想显示该页面时调用（

#page1

，

#uncollable1

）.fadeIn（），而不是简单地（

#page1

）.fadeIn（）。那会变得令人难以置信的混乱所以底线是div的结构不能更改

---

我需要的是一些javascript/jQuery函数，它可以将

.unclolleble

固定到

#pagecontainer

或

#page1

/

#page2

覆盖任何css，类似于（

.unclolleble

）.fixTo（

#pagecontainer

）

要将子对象固定到父对象

div

，请尝试在父对象

div

上使用

位置：相对

，在子对象

div

上使用

位置：固定

---

然后，您对子

div

（

top

，

bottom

，

left

和

right

）所做的所有定位都将相对于父

div
我创建了一个JSFIDLE，其中显示了一个可能的解决方案。

我删除了滚动条的浮动，并设置了
max height
和
overflow:auto以激活滚动

出于布局的原因，我还为页面本身设置了最小高度。
看看吧
 离题，但在未来，请更明智地选择标签。您选择的标签非常无用或完全错误。如果没有好的标签，相关的技术专家不会看到你的问题。我把你的标签换成了我对你需要什么的最佳猜测。嗯……不，不会的。位置：固定始终将其固定到视口，无论css设置是什么。o、 o
<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>