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;}

预览：

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！