css3 - 关于滚动条的CSS如何设置问题

Question

<p id='p3' style='width:200px;height:200px;overflow:auto;'>
        This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.
    </p>

就像上面代码 p里面有一段文字，我设置了overflow：auto；也就是超出部分显示滚动条，那么我如何修改这个滚动条的样式呢？

Answer 1

一個針對Webkit核心瀏覽器的捲軸美化的例子，不知道是不是你想要的

/* 滚动条部分 */
::-webkit-scrollbar {
    width:15px;
}

/* 轨道 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

/* 手柄 */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 15px;
    border-radius: 15px;
    background:rgba(200,200,200,0.7); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
/* 手柄激活态 */
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(200,200,200,0.4); 
}

Answer 2

那就定義瀏覽器捲軸樣式即可,兩者是一致的,如果需要不一樣,那就需要模擬捲軸

Answer 3

推薦你參考這篇文章：http://www.qianduan.net/css-custom-scroll-bar-style/
作者是微信團隊的神飛，寫的文章一直都很不錯！

Answer 4

話說滾動更改捲軸樣式。為什麼pc端可以正常顯示。手機端就不行了呢