在div中CSS自定义滚动条
我如何通过CSS（层叠样式表）为一个div定制滚动条，而不是整个页面？
我认为整合滚动条，CSS和浏览器兼容性的最新信息会很有帮助。
滚动条CSS支持
目前，不存在跨浏览器滚动条CSS样式定义。 我最后提到的W3C文章有以下声明并最近更新（2014年10月10日星期五03:09:48 CEST）：
某些浏览器（IE，Konqueror）支持非标准属性'scrollbar-shadow-color'，'scrollbar-track-color'等。 这些属性是非法的：它们既没有在CSS规范中定义，也没有被标记为私有属性（通过在它们前加上“-vendor-”）
微软
正如其他人所提到的，Microsoft支持滚动条样式（示例），但只适用于IE8及更高版本。
例：
.TA {
scrollbar-3dlight-color:gold;
scrollbar-arrow-color:blue;
scrollbar-base-color:;
scrollbar-darkshadow-color:blue;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:
}
Chrome和Safari（WebKit）
同样，WebKit现在有它自己的版本：
从WebKit中的自定义滚动条，相关的CSS：
/* pseudo elements */
::-webkit-scrollbar { }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb { }
::-webkit-scrollbar-corner { }
::-webkit-resizer { }
/* pseudo class selectors */
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
Firefox（壁虎）
根据Firefox自定义CSS滚动条的回答，Firefox没有自己的滚动条样式版本。
没有Gecko等价于::-webkit-scrollbar和朋友。
你必须坚持使用jQuery。
很多人都喜欢这个功能，请看：
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
此报告要求您提出完全相同的要求：https：//bugzilla.mozilla.org/show_bug.cgi？id = 547260
跨浏览器的滚动条样式
JavaScript库和插件可以提供跨浏览器解决方案。 有很多选择。
这份名单可以继续使用。 你最好的选择是搜索，研究和测试可用的解决方案。 我相信你将能够找到适合你需求的东西。
防止非法的滚动条样式
为防万一您想要防止未正确添加“-vendor”前缀的滚动条样式，W3C上的这篇文章提供了一些基本说明。 基本上，您需要将以下CSS添加到与浏览器关联的用户样式表中。 这些定义将覆盖您访问的任何页面上的无效滚动条样式。
body, html {
scrollbar-face-color: ThreeDFace !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
scrollbar-arrow-color: ButtonText !important;
}
重复或类似的问题/来源没有链接上面
注意：此答案包含来自各种来源的信息。 如果使用了源，那么它在这个答案中也是链接的。
用CSS自定义滚动条是不可能的，你需要一些JavaScript魔术。
有些浏览器支持非规范的CSS规则，例如::-webkit-scrollbar ，但是它并不理想，因为它只能在Webkit中工作。 IE也有类似的东西，但我认为他们不再支持它。
试试这个
来源：http://areaaperta.com/nicescroll/
简单的实现
<script type="text/javascript">
$(document).ready(
function() {
$("html").niceScroll();
}
);
</script>
它是一个“纯粹的JavaScript”滚动条，所以你的滚动条是可控的，并且在各种操作系统中看起来相同。
链接地址: http://www.djcxy.com/p/41607.html