Question

我目前正在运行Tumblr博客，我对HTML和CSS非常感兴趣。我为我的一个博客页面设计并创建了一个自定义布局。我不确定我是否已经看了太长时间或是什么，但由于某种原因，我的一个“div”元素中的滚动条根本不滚动。我是新手，所以我可以犯一个非常简单的错误，而不是注意到！

以下是与不滚动的特定“div”元素相关的代码片段。

（我意识到这可能不足以弄清楚问题，所以如果你想自己查看源代码，这里有一个link。或者，我已经粘贴了整个页面的代码在pastebin中。您可以查看它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>

Answer 1

从z-index声明中删除否定#watchlist。在z轴上“移回太远”的元素会导致它不响应正常的输入事件。您会注意到您也无法选择该div中的任何文本。

如果你需要一个元素在z轴上“后面”另一个元素，可以考虑在更接近的元素上添加正z-index而不是在更远的元素上添加负z-index。

垂直滚动条不滚动

1 个答案: