CODEWITHSUNDEEP
jqueryhtml
Nick
Nick

Reputation: 99

Scroll down effect on div

I am making a main menu type thing, problem is when you hit level 5 the outline runs out of room.

I was wondering if there is a way so that you could scroll down JUST the Div not the whole entire body?

Here is some code, and a link to 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>

And here is a link.

Upvotes: 0

Views: 87

Answers (1)

Shahar
Shahar

Reputation: 1677

Use overflow-y: scroll;:

#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+ */
}
<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>

Upvotes: 2

Related Questions