我想为所有浏览器显示滚动条。但是我的滚动条看起来并不像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 -->