好看的滚动条样式，css 滚动条样式
这篇文章给大家聊聊关于好看的滚动条样式，以及css 滚动条样式对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
利用div+jquery自定义滚动条样式的2种方法
可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条，但是大家都知道自带的不好看。接下来就是重点了，如何修改滚动条的样式呢？感兴趣的朋友可以了解下本文
最近做项目中有一个模块是用于实时监控的，左边有个菜单栏用于显示所有的设备，那当然是从数据库中动态获取的了，右边是个iframe用于显示监控画面。
本来这个功能并不复杂，左边的菜单项是利用dtree.js来实现的，可时当功能实现完成之后，却发现一个问题，就是左边菜单栏中的设备名有的会很长，会
超出了div的长度，准确说是左边iframe的宽度和长度不够。那么，这时就必须要利用滚动条了，可以设置左边菜单项div的overflow-
x:auto;overlfow-y:auto;这样就会自动生成了滚动条，但是大家都知道自带的不好看。接下来就是重点了，如何修改滚动条的样式呢？
经过从网上的不断搜索，发现有两种方法：
第一种方法：利用CSS提供的样式，一共是8种属性吧，在这里不做详细介绍，网上很多这方面的资料。
第二种方法：自己写一个新的滚动条，即不用div自带的滚动条。这样想要什么样的效果就有什么样的效果。具体实现，在网上搜了很多，可以发现基本上只有竖向滚动条，而没有横向滚动条，无奈之下，自己利用jquery写另一个滚动条，当然也借鉴了只有竖向滚动条的程序。
说
一下具体实现思路：目标div
即需要生成滚动条的div，里面嵌套了3个div，分别是用于显示内容的div_content，显示竖向滚动条的div_H,显示横向滚动条的
div_W,具体布局就是按照自带滚动条的div的布局一样，然后显示滚动条的div即div_H和div_W有各自包含了3个div，即左右箭头2个，
滚动条1个。具体代码如下：
复制代码
代码如下:
if($(_self).children(".jscroll-c").height()==null){
//添加内容框(div)
$(_self).wrapInner("<div
class='jscroll-c'
style='top:0px;z-index:9999;zoom:1;position:relative;'></div>");
//添加竖向滚动条
$(_self).append("<div
class='jscroll-e'
unselectable='on'
style='height:97.5%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div
class='jscroll-u'
style='position:absolute;top:0px;width:100%;right:0;background:blue;overflow:hidden'></div><div
class='jscroll-h'
unselectable='on'
style='background:green;position:absolute;left:0;-moz-user-select:none;border:1px
solid'></div><div
class='jscroll-d'
style='position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden'></div></div>");
//添加横向滚动条
$(_self).append("<div
class='jscroll-s'
unselectable='on'
style='width:180px;bottom:0px;left:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div
class='jscroll-l'
style='position:absolute;bottom:0px;height:100%;left:0;background:blue;overflow:hidden'></div><div
class='jscroll-g'
unselectable='on'
style='height:100%;background:green;position:absolute;left:0;-moz-user-select:none;border:1px
solid'></div><div
class='jscroll-r'
style='position:absolute;bottom:0px;height:100%;right:0;background:blue;overflow:hidden'></div></div>");
}
然后无非就是一些判断，div的内容是否超过了div的范围，监听事件的添加。具体代码可见我的下载资源；
如何修改滚动条的默认样式
页面布局中，当内容超出盒子时，为了美观，会将超出的部分设置滚动条效果，有些浏览器默认的滚动条非常的丑，那你知道如何修改滚动条样式吗？这篇文章将会教你怎么设置滚动条样式。
/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/ 1/*定义滚动条轨道*/
#style-2::-webkit-scrollbar-track
{
background-color:#F5F5F5;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
}
/*定义滚动条高宽及背景*/
#style-2::-webkit-scrollbar
{
width: 10px;
background-color: rgba(0, 0, 0, 0.34);
}
/*定义滚动条*/
#style-2::-webkit-scrollbar-thumb
{
background-color:#8b8b8b;
border-radius: 10px;
}要实现单个div里面的内容滚动，需要满足三个条件：
1、div必须设定固定的高度，不能使用百分比或 auto等弹性值。
2、其中的内容高度必须超过它本身的高度。
3、必须添加属性“overflow：auto”。
隐藏滚动条：
1、去掉水平方向的滚动条：
<body style="overflow-x:hidden">
2、去掉垂直方向的滚动条：
<body style="overflow-y:hidden">
3、隐藏横向、显示纵向滚动条：
<body style="overflow-x:hidden;overflow-y:scroll">
4、隐藏全部滚动条：
<body style="overflow:hidden">或者<body scroll="no">
更好的方法就是把滚动条的颜色设置为完全透明，这样既可以实现内容的滚动，又达到不显示滚动条的目的。
应用:
没有水平滚动条:
<div style="overflow-x:hidden">test</div>
没有垂直滚动条
<div style="overflow-y:hidden">test</div>
没有滚动条
<div style="overflow-x:hidden;overflow-y:hidden"或 style="overflow:hidden">test</div>
自动显示滚动条
<div style="height:100px;width:100px;overflow:auto;">test</div>
自己定义滚动条的颜色，代码如下：
Body{
scrollbar-arrow-color:#f4ae21;/*三角箭头的颜色*/
scrollbar-face-color:#333;/*立体滚动条的颜色*/
scrollbar-3dlight-color:#666;/*立体滚动条亮边的颜色*/
scrollbar-highlight-color:#666;/*滚动条空白部分的颜色*/
scrollbar-shadow-color:#999;/*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color:#666;/*立体滚动条强阴影的颜色*/
scrollbar-track-color:#666;/*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8;/*滚动条的基本颜色*/
Cursor:url(mouse.cur);/*自定义个性鼠标*/
}以上2项适用与<body>、<div>、<textarea>、<iframe>
附：解释一下overflow属性和不同值得作用：
overflow:visible;不剪切内容也不添加滚动条。默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
overflow：auto；在需要时剪切内容并添加滚动条。
overflow：hidden；不显示超过对象高度的内容。
overflow：scroll；总是显示纵向滚动条。
overflow水平及垂直方向内容溢出时的设置
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上属性设置的值为visible、scroll、hidden、auto
hidden效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll无论内容是否超越范围，都将显示滚动条。
CSS如何设置滚动条样式 滚动条美化方法详解
CSS设置滚动条样式主要通过伪元素（如::-webkit-scrollbar）和Firefox专属属性（如scrollbar-width）实现，结合颜色、圆角、阴影等属性可完成跨浏览器美化，但需注意兼容性与用户体验。
一、核心方法与伪元素滚动条样式由以下伪元素控制（适用于WebKit内核浏览器，如Chrome、Safari）：
::-webkit-scrollbar：定义滚动条整体宽度。::-webkit-scrollbar{ width: 8px;/*垂直滚动条宽度*/ height: 8px;/*水平滚动条高度*/}::-webkit-scrollbar-track：设置滚动槽（背景）样式。::-webkit-scrollbar-track{ background-color:#f1f1f1;/*背景色*/ border-radius: 4px;/*圆角*/ border: 1px solid#ccc;/*边框*/}::-webkit-scrollbar-thumb：定义滑块样式，支持悬停效果。::-webkit-scrollbar-thumb{ background-color:#888;/*滑块颜色*/ border-radius: 4px;/*圆角*/ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);/*内阴影*/}::-webkit-scrollbar-thumb:hover{ background-color:#555;/*悬停颜色*/}
二、Firefox兼容方案Firefox使用专属属性实现类似效果：
scrollbar-width：控制滚动条宽度（auto/thin/none）。scrollbar-color：定义滑块与滚动槽颜色（格式：滑块颜色滚动槽颜色）。*{ scrollbar-width: thin;/*细滚动条*/ scrollbar-color:#888#f1f1f1;/*滑块灰色，滚动槽浅灰*/}三、进阶美化技巧阴影与边框：
为滑块添加内阴影增强立体感：::-webkit-scrollbar-thumb{ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
为滚动槽添加边框：::-webkit-scrollbar-track{ border: 1px solid#ccc;}
渐变与透明度：
滑块使用渐变背景：::-webkit-scrollbar-thumb{ background: linear-gradient(to bottom,#888,#666);}
设置透明度（需配合RGBA颜色）：::-webkit-scrollbar-thumb{ background-color: rgba(136, 136, 136, 0.7);}
四、跨浏览器兼容性处理WebKit内核浏览器（Chrome、Safari、Edge新版本）：直接使用伪元素。Firefox：使用scrollbar-width和scrollbar-color。旧版Edge/IE：不支持自定义滚动条样式，需通过JavaScript库（如perfect-scrollbar）模拟。示例代码（完整跨浏览器方案）：
/* WebKit浏览器*/::-webkit-scrollbar{ width: 10px;}::-webkit-scrollbar-track{ background:#f1f1f1;}::-webkit-scrollbar-thumb{ background:#888; border-radius: 5px;}::-webkit-scrollbar-thumb:hover{ background:#555;}/* Firefox*/*{ scrollbar-width: thin; scrollbar-color:#888#f1f1f1;}五、潜在问题与注意事项兼容性：
伪元素仅适用于WebKit内核，Firefox需额外属性，旧版浏览器可能无效。
测试时需覆盖Chrome、Firefox、Safari等主流浏览器。
用户体验：
颜色对比度：确保滑块与滚动槽颜色对比明显（如WCAG标准要求至少4.5:1）。
滑块大小：避免过小（建议最小宽度≥16px），否则影响点击操作。
悬停反馈：通过:hover状态提供视觉反馈，提升交互感。
可访问性：
部分用户依赖系统默认滚动条（如高对比度模式），建议提供“恢复默认样式”选项。
避免过度自定义导致识别困难（如透明度过高或颜色过于相近）。
六、效果对比示例默认滚动条：
美化后滚动条：
通过合理设置伪元素和Firefox属性，可实现从“系统默认”到“设计感十足”的滚动条样式升级，同时兼顾功能性与美观性。
OK，关于好看的滚动条样式和css 滚动条样式的内容到此结束了，希望对大家有所帮助。