向下滚动对div的影响

Question

我正在制作一个主菜单类型的东西，问题是当你达到5级时，轮廓用完房间。

我想知道是否有办法让你可以向下滚动而不是整个身体？

这是一些代码，以及指向jsfiddle的链接。

<div id="outline">
<div id="level1">
    <p>Level One</p>
    <div id="level2">
        <p>Level Two</p>
    </div>
    <div id="level3">
        <p>Level Three</p>
    </div>
    <div id="level4">
        <p>Level Four</p>
    </div>
    <div id="level5">
        <p>Level Five</p>
    </div>
</div>

这是 link 。

Answer 1

使用overflow-y: scroll;：

＆＃13;

＆＃13;

#outline {
    overflow-y: scroll;
    height: 280px;
    width: 320px;
    /*background-color: */
    border: 2px solid black;
}
#level1 {
    color: white;
    position: relative;
    margin-top: 5px;
    margin-left: 90px;
    text-align: center;
    margin: center;
    border: 2px solid black;
    width: 125px;
    height: 45px;
    background: -webkit-linear-gradient(top, rgba(63, 63, 63, 1) 0%, rgba(14, 14, 14, 1) 100%);
}
#level2 {
    position: relative;
    margin-top: 50px;
    text-align: center;
    margin: center;
    border: 2px solid black;
    width: 125px;
    height: 45px;
    background: -webkit-linear-gradient(top, rgba(63, 63, 63, 1) 0%, rgba(14, 14, 14, 1) 100%);
    /* Chrome10+,Safari5.1+ */
}
#level3 {
    position: relative;
    margin-top: 50px;
    text-align: center;
    margin: center;
    border: 2px solid black;
    width: 125px;
    height: 45px;
    background: -webkit-linear-gradient(top, rgba(63, 63, 63, 1) 0%, rgba(14, 14, 14, 1) 100%);
    /* Chrome10+,Safari5.1+ */
}
#level4 {
    position: relative;
    margin-top: 50px;
    text-align: center;
    margin: center;
    border: 2px solid black;
    width: 125px;
    height: 45px;
    background: -webkit-linear-gradient(top, rgba(63, 63, 63, 1) 0%, rgba(14, 14, 14, 1) 100%);
    /* Chrome10+,Safari5.1+ */
}
#level5 {
    position: absolute;
    margin-top: 50px;
    text-align: center;
    margin: center;
    border: 2px solid black;
    width: 125px;
    height: 45px;
    background: -webkit-linear-gradient(top, rgba(63, 63, 63, 1) 0%, rgba(14, 14, 14, 1) 100%);
    /* Chrome10+,Safari5.1+ */
}

＆＃13;

<div id="outline">
    <div id="level1">
        <p>Level One</p>
        <div id="level2">
            <p>Level Two</p>
        </div>
        <div id="level3">
            <p>Level Three</p>
        </div>
        <div id="level4">
            <p>Level Four</p>
        </div>
        <div id="level5">
            <p>Level Five</p>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;