1つのdiv内のカスタムスクロールバー

Question

Chromeにカスタムスクロールバーが必要です。

だから、私はこのSASSを使用しています：

::-webkit-scrollbar { 
    width: 0.5em; 
    height: 0.5em; 
} 

::-webkit-scrollbar-thumb { 
    background-color: rgba(255,255,255,.1); 
    border-radius: 3px; 

    &:hover { 
    background: rgba(255,255,255,.2); 
    } 
} 

私の問題は、私は、特定のdivに、このスクロールバーのスタイルをしたいということです。しかし、私がする場合：

#boardslist { 

    ::-webkit-scrollbar { 
    width: 0.5em; 
    height: 0.5em; 
    } 

    ::-webkit-scrollbar-thumb { 
    background-color: rgba(255,255,255,.1); 
    border-radius: 3px; 

    &:hover { 
     background: rgba(255,255,255,.2); 
    } 
    } 

} 

は機能していません。何か案は？

Answer 1

#boardslist { 

    &::-webkit-scrollbar { 
    width: 0.5em; 
    height: 0.5em; 
    } 

    &::-webkit-scrollbar-thumb { 
    background-color: rgba(255,255,255,.1); 
    border-radius: 3px; 

    &:hover { 
    background: rgba(255,255,255,.2); 
    } 
    } 
} 

http://codepen.io/tholman/pen/tldwm