我的滚动条在mozilla firefox浏览器中不起作用,它仅适用于Chrome浏览器

时间:2017-12-06 07:03:25

标签: html css3

我想为所有浏览器显示滚动条。但是我的滚动条看起来并不像chrome的滚动。它显示为普通的滚动。但是,我创建了具有漂亮设计的半径滚动条。我不喜欢#39;我想使用jquery和javascript。如何才能为所有浏览器显示?

CSS

.scrollbar {
  width: 620px;
  overflow-y: scroll;
  margin-top: 20px;
}

.force-overflow {
  min-height: 350px;
}

#style-1::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #464242;
}

#style-1::-moz-scrollbar-track {
  -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #464242;
}

#style-1::-webkit-scrollbar {
  width: 12px;
  background-color: #464242;
}

#style-1::-moz-scrollbar {
  width: 12px;
  background-color: #464242;
}

#style-1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #85b59d;
}

#style-1::-moz-scrollbar-thumb {
  border-radius: 10px;
  -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #85b59d;
}

.scrollbar2 {
  width: 620px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 20px;
  height: 350px;
}

HTML

<!-- image block -->
<div class="image-main-block scrollbar " id="style-1">
  <div class="force-overflow">
    <img src="../css/images/flower.jpg" alt="" height="130" width="195"></img>
    <img src="../css/images/img2.jpg" alt="" height="130" width="195"></img>
    <img src="../css/images/im3.jpg" alt="" height="130" width="195"></img>
    <img src="../css/images/im4.jpg" alt="" height="130" width="195" class="image"></img>
    <img src="../css/images/flower.jpg" alt="" height="130" width="195" class="image"></img>
    <img src="../css/images/img2.jpg" alt="" height="130" width="195" class="image"></img>
    <img src="../css/images/im4.jpg" alt="" height="130" width="195" class="image"></img>
    <img src="../css/images/flower.jpg" alt="" height="130" width="195" class="image"></img>
    <img src="../css/images/img2.jpg" alt="" height="130" width="195" class="image"></img>
  </div>
</div>
<!-- end of image block -->

0 个答案:

没有答案
相关问题