CODEWITHSUNDEEP
htmlcsstumblr
user3925676
user3925676

Reputation: 13

Vertical Scroll bar not Scrolling

I am currently running a Tumblr blog, and I'm very interested in HTML and CSS. I have designed and created a custom layout for one of my blog's pages. I am not sure if I have been looking at this for too long or what, but for some reason my scroll bar in one of my "div" elements is not scrolling at all. I am very new at this, so I could have made a very simple mistake and not noticed!

Here are the code snippets pertaining to the specific "div" element that is not scrolling.

(I realize this may not be enough to figure out the problem, so here is a link to the page if you wish to view the source yourself. Alternatively, I have pasted the entire page's code in pastebin. You can view it here.)

CSS:

::-webkit-scrollbar-thumb{
    background-color: #000;
    border: 1px solid #fff;
    height:auto;
}

::-webkit-scrollbar {
    height:9px;
    width:9px;
    background-color: #000;
    border: 4px solid #fff;
}

#watchlist {
    background-color:#fff;
    opacity:0.85;

    font-family:cambria;
    float:right;
    color:#000;
    text-align:left;
    font-size:14px;

    top:-392px;
    margin-right:105px;
    border:#000 1px solid;
    width:290px;
    height:360px;
    max-height:400px;
    position:relative;
    overflow-y:auto;

    z-index:-9999999;
}

HTML:

<div id="watchlist">
<font size="5"><center><b>My Watchlist:</b></center></font>
<br/>
<!--**************************************************** -->
<p>
    <center><b>Currently Watching:</b></center>

    <ul>
        <li>Neon Genesis Evangelion
            </br><small><i>(Completed Series)</i></small>
        </li>

        <li>Sword Art Online II | Gun Gale Online
            </br><small><i>(Ongoing Series)</i></small>
        </li>

        <li>Tokyo Ghoul
            </br><small><i>(Ongoing Series)</i></small>
        </li>

        <li>The Legend of Korra s3
            </br><small><i>(Ongoing Series)</i></small>
        </li>

        <li>Angel Beats
            </br><small><i>(Completed Series)</i></small>
        </li>

        <li>Shinsekai Yori | From the New World
            </br><small><i>(Completed Series)</i></small>
        </li>

        <li>Gravity Falls s2
            </br><small><i>(Ongoing Series)</i></small>
        </li>

        <li>Adventure Time s6
            </br><small><i>(Ongoing Series)</i></small></small>
        </li>

        <li>FLCL: Fooly Cooly
            </br><small><i>(Completed Series)</i></small>
        </li>

</p>
<!--**************************************************** -->
<p>
    <center><b>Completed:</b></center>

    <li>Puella Magi Madoka Magica | Magical Girl Madoka Magica</li>
    <li>Sword Art Online</li>
    <li>Shingeki No Kyojin | Attack on Titan</li>
    <li>Mirai Nikki | Future Diary</li>
    <li>Paranoia Agent</li>
    <li>My Little Pony: Friendship is Magic s1-s4</li>

    </ul>
</p>
<!--**************************************************** -->
<p>
    <center><b>Planning to Watch:</b></center>
    <ul>
        <li>Once Upon a Time
            </br><small><i>(Ongoing Series)</i></small>
        </li>

         <li>Another
             </br><small><i>(Completed Series)</i></small>
         </li>

         <li>Death Note
            </br><small><i>(Completed Series)</i></small>
        </li>

    </ul>
</p>
<!--****************************************************-->
<p>
    <center><b>Put-off Watching:</b></center>
     <ul>
        <li>xxxHolic</li>
        <li>Steven Universe</li>
    </ul>
</p>

Upvotes: 1

Views: 1397

Answers (1)

kyledws
kyledws

Reputation: 236

Remove the negative z-index from #watchlist declaration. Moving a element "too far back" on the z-axis causes it to not respond to normal input events. You'll notice that you also can't select any of the text in that div.

If you need an element to be "behind" another on the z-axis consider adding a positive z-index to the closer element instead of a negative z-index to the farther element.

Upvotes: 2

Related Questions