CSS3 - 如何“恢复” :: - webkit-scrollbar属性为默认滚动条 [英] CSS3 - How to "restore" ::-webkit-scrollbar property to the default scroll bar

问题描述

您好我正在使用下一个CSS代码来设置Safari和Chrome中的滚动条。工作真的很棒，但我面临下一个问题，我想要恢复默认值，当我在我的iPad上查看网站。我使用@media css来实现这个功能，但是，我不知道如何恢复默认值。

Hi I'm using the next css code to style scroll bars in Safari and Chrome. And works really great but I´m facing the next issue, I would like te restore the default value, when I view the site on my ipad. I'm using @media css for achived this but, I don't know how to restore the defaults values.

@media screen and (min-width: 768px) and (max-width: 1024px) {  }



/*Scroll bar nav*/
::-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;
    background:#FFF;    
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(204,204,204,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(204,204,204,0.4); 
}

推荐答案

将所有属性设置为auto;并会诀窍。这是一个自我安慰，但我猜有一天有人可以有同样的问题。

Hi I just realized you can set all the properties in auto; and will do the trick. This is a self anwser but I guess someday someone can have the same question.

/*Scroll bar nav*/
::-webkit-scrollbar {
    width: auto;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: auto; 
    -webkit-border-radius: auto;
    border-radius: auto;
    background:auto;    
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius:auto;
    border-radius:auto;
    background:auto; 
    -webkit-box-shadow:auto; 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: auto; 
}

我不知道是否存在其他方法。

I don't know if exist another method.

- UPDATE -
看起来您也可以使用初始和 unset value
//恢复所有值

-- UPDATE -- Look like you can also use the initial and unset value //reverting all the values

::-webkit-scrollbar {
    all:unset;
}

或适用于特定的 {width：unset } || {width：initial}

or apply to an specific one {width : unset} || {width : initial}

这篇关于CSS3 - 如何“恢复” :: - webkit-scrollbar属性为默认滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！