Question

我尝试使用HTML和CSS为我的通知div创建一个vertscrolling div（它是一个未显示的div，直到按下通知图标）并且它失败了，在chrome中至少浏览器向我显示滚动条但是我无法控制它（不能滑动那个矩形，当我点击箭头时没有发生任何事情）我已经尝试了溢出y适当性和滚动适当性但没有任何作用FYI我有4个通知框已打开彼此顶部，仅在单击正确图标时显示（一个用于通知，一个用于消息，另一个用于友情请求，最后一个用于论坛通知）HTML是这样的：

<div id="infoNot" >
  <ul>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href='' class="cMore">
      <li class="cMore">Voir toutes les notifications</li></a>
  </ul>
</div>
<div id="infoMsg">
  <ul>
      <li><img src='media/images/icons/msg.png'><p class="sender">YOLO</p>
      <p class="description">Salut, Cava? wi non pas bien</p><span></span></li>
      <li><img src='media/images/icons/msg.png'><p>Salut</p><span></span></li>
      <li><img src='media/images/icons/msg.png'><p>Salut</p><span></span></li>
  </ul>
</div>
<div id="infoForum">
  <ul>
      <a href=''><li>Foulan a repondu à votre poste dans le forum</li></a>
      <a href=''><li>L'admin a supprimer votre sujet</li></a>
      <a href=''><li>bla bla bla</li></a>
  </ul>
</div>
<div id="infoFR">
   <ul>
     <a href=''><li>Foulan foulani veut étre votre ami</li></a>
     <a href=''><li>Fataan foulani veut étre votre ami</li></a>
     <a href=''><li>Mr. X foulani veut étre votre ami</li></a>
   </ul>
</div>

CSS：

#infoNot , #infoMsg , #infoForum , #infoFR
{
    top:50px;
    left:10px;
    display: block;
    position: absolute;
    margin-top: 5px;
    visibility: hidden;
    height: 100%;
}
#infoMsg
{
    left:25px;
    height: 500px;
}
#infoNot ul , #infoMsg ul , #infoForum ul , #infoFR ul
{
    list-style: none;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
    border: 1px black solid;
    border-radius: 5px 5px 5px 5px;
}
#infoNot ul a
{
    display: block;
    width: 100%;
    height:100%;
}
#infoNot ul a:nth-child(even)
{
    color: #595959;
    background-color: #a1a1a1;
}
#infoNot ul a:nth-child(odd)
{
    color: #a1a1a1;
    background-color: #595959;
}
#infoNot ul a:hover
{
    background-color: #818181;
}
#infoMsg ul li img
{
    float:left;
    display: block;
}
#infoMsg ul li
{
    padding-top:3px;
    padding-buttom:3px;
    border-bottom: 1px solid #c4c4c2;
}
#infoMsg span
{
    clear:both;
    display: block;
}

滚动通知菜单（jQuery）

0 个答案: