滚动条相关的位置和动画

Question

尝试实现手动滚动样式。到目前为止看起来不错，只有几个问题，我没有看到实施方式： - 需要在3px距离上从顶部，右侧和底部移动滚动手柄 - 当光标不在滚动区域时，需要制作一个隐藏滚动条/手柄的动画。

最好在css中（该应用仅限于谷歌浏览器＆gt; 31位用户）。

CSS代码：

/* Let's get this party started */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: rgba(0,0,0,0.3); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.05); 
}