如何将此应用于Firefox和所有浏览器。 [英] How can I apply this for firefox and all browsers.

问题描述

/* For the "inset" look only */
html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}

我尝试过：



此自定义滚动条在Firefox中无法正常工作。

What I have tried:

This Custom scrollbar not working properly in Firefox.

推荐答案

CSS中没有标准的样式滚动条支持 - 这里你所拥有的是WebKit（Chrome）特定的，不能在任何其他浏览器上工作......

Firefox上有开放功能请求 - 今年年满16岁......

IE有自己的一组属性设置......

在这里看到你选项：

使用CSS的IE，Chrome和Firefox的自定义滚动条 - Code Mug [ ^ ]

There is no standard support for styling scrollbars in CSS - what you have here is WebKit (Chrome) specific and can not work on any other browser...
Firefox has open feature request on it - it turns 16 this year...
IE has it's own set of attributes to set...
Read here to see you options:
Custom scrollbars for IE, Chrome and Firefox using CSS - Code Mug[^]

这篇关于如何将此应用于Firefox和所有浏览器。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！