Chrome滾動條透明的問題

在做一個小應用的時候，給一個面板設置了透明度(opacity:.9)，在瀏覽頁面的時候，發現滾動條居然透明了，如下圖所示：

然后想是不是可以使用自定義來解決這個問題，找到這篇文章--《不用裝擴展也可自定義Chrome滾動條的樣式》

::-webkit-scrollbar-track-piece{
    background-color:#fff;
    -webkit-border-radius:0;
}
::-webkit-scrollbar{
    width:8px;
    height:8px;
}
::-webkit-scrollbar-thumb{
    height:50px;
    background-color:#999;
    -webkit-border-radius:4px;
    outline:2px solid #fff;
    outline-offset:-2px;
    border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
    height:50px;
    background-color:#9f9f9f;
    -webkit-border-radius:4px;
}

現在的效果，如下圖所示：