之前在做項目的時候遇到了一個問題际邻,當時因為我們做的項目是要對谷歌的滾動條進行再定義的,但是分配到我的那個頁面的時候是需要對滾動條進行再次還原的(滾動條的樣式一旦修改了之后庆捺,他原有的樣式就不存在了碉纳,所以所有的樣式就必須重新修改),也就是將滾動條再重新設置回原有的樣子绞旅,在網上找了很久,之后再一篇文章中找到了一些很不錯的方法温艇,下面分享給大家。
這是原文的鏈接blog.csdn.net/hanshileiai/article/details/40398177;
這部分是對整個滾動條樣式的整體部分堕汞,顏色是背景色
::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: #ddd;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
}
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
這是用來定義滑塊的勺爱,包括鼠標移動到上面以后的情況。
::-webkit-scrollbar-thumb {
height:100px;
border-radius: 0%;
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
background-color: #C1C1C1;
}
::-webkit-scrollbar-thumb:hover {
height:100px;
border-radius: 0%;
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
background-color: #A8A8A8;
}
這里用這種背景圖片的方式是他的上下兩部f分可以變成谷歌滾動條的樣式讯检,圖片可以自己截圖琐鲁。
::-webkit-scrollbar-button:end:increment {
background-image: url(../../images/right.png);
}
::-webkit-scrollbar-button:start:decrement {
background-image: url(../../images/left.png);
}