css3中webkit内核的滚动栏样式

项目其中用到的滚动栏样式，在别人的基础上调成适合自己的样式。（IE能够调试滚动栏样式，firefox眼下不能调试）

::-webkit-scrollbar { width: 14px; }/* Track & scroll thickness */

  ::-webkit-scrollbar-track { background-color:#ddd; }/* Track color */

  ::-webkit-scrollbar-thumb { background-color: #333;}/* Scroll color */

  ::-webkit-scrollbar-thumb:hover { background-color: #000 }/* Scroll hover color */

  ::-webkit-scrollbar-thumb:active { background-color: #000 }/* Scroll click & drag color */

分享一下 我的项目中的webkit内核滚动栏样式（chrome，sarfrai）
demo：http://codepen.io/tianzi77/pen/mJNPmE

        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin: 20px auto;
            padding: 10px;
            width: 500px;
            height: 600px;
            border: 1px solid #ddd;
        }

        p {
            height: 1000px;
        }
        /* 自己定义滚动栏样式 */

        .webkit-scrollbar {
            overflow: hidden;
        }

        .webkit-scrollbar:hover {
            overflow-y: scroll;
        }

        .webkit-scrollbar::-webkit-scrollbar {
            width: 7px;
            height: 7px;
            /*设置整个滚动栏的宽高*/
        }

        .webkit-scrollbar::-webkit-scrollbar-track {
            background-color: transparent;
            /*整个滚动背景色*/
        }

        .webkit-scrollbar::-webkit-scrollbar-thumb {
            background-color: #9e9e9e;
            /*7px的滚动栏背景色*/

            border-radius: 7px;
            border: 1px solid #fff;
        }

        .webkit-scrollbar::-webkit-scrollbar-thumb:hover {
            background-color: #525252;
        }