webkit内核浏览器自定义滚动条

有时候做页面内的定宽高的模块时，会涉及到页面内容超出元素宽高的情况，这里介绍一个适用于webkit的美化滚动条的方法。
当然，除此之外还有兼容其他浏览器的很好的美化滚动条的插件perfect-scrollbar（这里不做详细说明），很好用。
html代码：

<div id='search_result'>　　　
    <div>
        　我常想在纷扰中寻出一点闲静来，然而委实不容易。目前是这么离奇，心里是这么芜杂。一个人做到只剩了回忆的时候，生涯大概总要算是无聊了罢，但有时竟会连回忆也没有。中国的做文章有轨范，世事也仍然是螺旋。前几天我离开中山大学的时候，便想起四个月以前的离开厦门大学；听到飞机在头上鸣叫，竟记得了一年前在北京城上日日旋绕的飞机。我那时还做了一篇短文，叫做《一觉》。现在是，连这“一觉”也没有了。 
　　广州的天气热得真早，夕阳从西窗射入，逼得人只能勉强穿一件单衣。书桌上的一盆“水横枝”，是我先前没有见过的：就是一段树，只要浸在水中，枝叶便青葱得可爱。看看绿叶，编编旧稿，总算也在做一点事。做着这等事，真是虽生之日，犹死之年，很可以驱除炎热的。 
    </div>　
</div>

css代码：

#search_result{
            width: 400px;
            height: 200px;
            border: 1px solid red;
            overflow: auto;
        }
        #search_result::-webkit-scrollbar {
            width: 4px;
            height: 10px;
        }

        #search_result::-webkit-scrollbar-button {
            background-color: #fff;
        }

        #search_result::-webkit-scrollbar-track {
            background: #fff;
        }

        #search_result::-webkit-scrollbar-thumb {
            background: rgba(204, 199, 201, 0.98);
            border-radius: 4px;
        }

预览：

需要的可直接复制代码，调试即可。