CSS设置滚动条样式

合集下载

CSS滚动条

CSS滚动条前⾯的话滚动条在⽹页中经常见到，却并没有受到⾜够的重视。

只有当因为滚动条的问题需要处理兼容性时，才进⾏调试操作。

本⽂就滚动条的常见内容进⾏梳理条件滚动条和overflow是紧密相关的。

只有当⽗级的overflow的值是auto或scroll，并且元素的内容超出元素区域时，才有可能出现滚动条测试内容默认⽆论什么浏览器，默认滚动条均来⾃<html>，⽽不是<body>。

因为<body>元素默认有8px的margin。

若滚动条来⾃<body>元素，则滚动条与页⾯则应该有8px的间距，实际上并没有间距，所以滚动条来⾃<html>元素尺⼨通过以下代码可得出滚动条会占⽤浏览器的可⽤宽度为：chrome/firefox/IE 17pxsafari 21px.box{width: 400px;overflow: scroll;}.in{*zoom: 1;}<div class="box"><div id="in" class="in"></div></div>console.log(400-document.getElementById('in').clientWidth);兼容【1】默认情况下IE7-浏览器默认有⼀条纵向滚动条，⽽其他浏览器则没有//IE7-浏览器html{overflow-y: scroll;}//其他浏览器html{overflow: auto;}//去除页⾯默认滚动条html{overflow: hidden;}【2】IE7-浏览器与其他浏览器关于滚动条的宽度设定机制不同.box{width: 200px;height: 100px;background-color: pink;overflow: scroll;}.in{width: 100%;height: 60px;background-color: lightgreen;}<div class="box"><div class="in">测试⽂字</div></div> ⽗级box出现纵向滚动条，实际上⼦级in的可⽤宽度就缩⼩了。

div 子元素高度超过就出现滚动条

在Web开发中，经常会遇到需要设置div子元素高度超过一定数值时，出现滚动条的需求。

在这种情况下，我们需要通过一定的方法来实现这一效果。

下面将详细介绍如何实现div子元素高度超过就出现滚动条的方法。

1. 使用CSS的overflow属性在HTML和CSS中，我们可以通过设置div元素的overflow属性来实现子元素高度超过一定数值时出现滚动条的效果。

overflow属性有以下几种取值：- visible：默认值，子元素超出父元素时会被显示出来，不会出现滚动条。

- hidden：子元素超出父元素时会被隐藏起来，同样不会出现滚动条。

- scroll：子元素超出父元素时会出现滚动条，无论内容是否溢出。

- auto：子元素超出父元素时会自动出现滚动条，只有当内容溢出时才出现滚动条。

我们可以通过设置div元素的overflow属性为scroll或auto来实现子元素高度超过一定数值时出现滚动条的效果。

2. 使用max-height属性除了使用overflow属性外，我们还可以结合使用max-height属性来实现子元素高度超过一定数值时出现滚动条的效果。

max-height属性可以设置元素的最大高度，当元素的高度超过这个数值时，就会出现滚动条。

在CSS中，我们可以通过以下方法来设置div元素的max-height属性：```cssdiv {max-height: 200px; /* 设置div元素的最大高度为200px */overflow: auto; /* 当内容溢出时自动出现滚动条 */}```通过上述方法，我们可以实现当div子元素的高度超过200px时，就会出现滚动条的效果。

3. 结合使用overflow和max-height属性除了单独使用overflow和max-height属性外，我们还可以结合使用这两个属性来实现更加灵活的效果。

通过设置div元素的max-height 属性为一定数值，同时设置overflow属性为auto或scroll，可以在子元素高度超出一定数值时出现滚动条的效果，同时保证滚动条的样式和行为符合实际需求。

element中修改滚动条宽度

element中修改滚动条宽度
要在HTML元素中修改滚动条的宽度，你需要使用CSS样式来实现。

首先，你可以使用以下代码来选择需要修改滚动条宽度的元素：
css.
.element {。

scrollbar-width: thin; / 设置滚动条宽度为细 /。

}。

上述代码中，.element是你想要修改滚动条宽度的元素的类名
或者ID。

scrollbar-width属性用于设置滚动条的宽度，你可以将
其设置为thin（细）或者auto（自动）来改变滚动条的宽度。

另外，如果你想要在特定浏览器中自定义滚动条的样式，你可
以使用一些特定的CSS伪类和属性来实现。

例如，在WebKit浏览器
中（如Chrome和Safari），你可以使用以下代码来修改滚动条的
宽度：
css.
.element::-webkit-scrollbar {。

width: 5px; / 设置滚动条宽度为5像素 /。

}。

在上述代码中，.element::-webkit-scrollbar选择了需要修
改滚动条样式的元素，并通过设置width属性来改变滚动条的宽度。

需要注意的是，修改滚动条样式在不同浏览器中的兼容性可能
会有所不同，因此在实际应用中需要进行充分的测试以确保在各种
浏览器中都能正常显示。

同时，修改滚动条样式也可能会影响用户
体验，因此需要谨慎使用，确保不会影响到用户对网页内容的正常
浏览和操作。

css设置滚动条并显示或隐藏

css设置滚动条并显⽰或隐藏看效果，没有滚动条，超出div，开发中肯定不⾏。

有滚动条最后就是想隐藏滚动条代码有滚动条并显⽰1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Title</title>6</head>7<body style="width:229px; height:203px; text-align:center; padding-top: 50px; margin-left: 480px; background-color: darkkhaki"> 8<div class="outer-container" style="border:1px solid #000; background-color: #00B83F">9<div class="inner-containe" style="width:229px; height:203px; overflow:auto;">10<li><span >overflow10</span></li>11<li><span >overflow11</span></li>12<li><span >overflow12</span></li>13<li><span >overflow13</span></li>14<li><span >overflow14</span></li>15<li><span >overflow15</span></li>16<li><span >overflow16</span></li>17<li><span >overflow17</span></li>18<li><span >overflow18</span></li>19<li><span >overflow19</span></li>20<li><span >overflow10</span></li>21<li><span >overflow11</span></li>22<li><span >overflow12</span></li>23<li><span >overflow13</span></li>24<li><span >overflow14</span></li>25<li><span >overflow15</span></li>26<li><span >overflow16</span></li>27<li><span >overflow17</span></li>28<li><span >overflow18</span></li>29<li><span >overflow19</span></li>30<li><span >overflow10</span></li>31<li><span >overflow11</span></li> 32<li><span >overflow12</span></li> 33<li><span >overflow13</span></li> 34<li><span >overflow14</span></li> 35<li><span >overflow15</span></li> 36<li><span >overflow16</span></li> 37<li><span >overflow17</span></li> 38<li><span >overflow18</span></li> 39<li><span >overflow19</span></li> 40<li><span >overflow10</span></li> 41<li><span >overflow11</span></li> 42<li><span >overflow12</span></li> 43<li><span >overflow13</span></li> 44<li><span >overflow14</span></li> 45<li><span >overflow15</span></li> 46<li><span >overflow16</span></li> 47<li><span >overflow17</span></li> 48<li><span >overflow18</span></li> 49<li><span >overflow19</span></li> 50</div>51</div>5253</body>54</html>有滚动但是隐藏1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Title</title>6<style type="text/css">7 .outer-container{8 width: 229px;9 height: 203px;10 position: relative;11 overflow: hidden;12 }13 .inner-containe{14 position: absolute;15 left: 0;16 top: 0;17 right: -17px;18 bottom: 0;19 overflow-x: hidden;20 overflow-y: scroll;21 }22</style>23</head>24<body style=" text-align:center; padding-top: 50px; margin-left: 480px; background-color: darkkhaki"> 25<div class="outer-container" style="border:1px solid #000; background-color: #00B83F">26<div class="inner-containe">27<li><span >overflow10</span></li>28<li><span >overflow11</span></li>29<li><span >overflow12</span></li>30<li><span >overflow13</span></li>31<li><span >overflow14</span></li>32<li><span >overflow15</span></li>33<li><span >overflow16</span></li>34<li><span >overflow17</span></li>35<li><span >overflow18</span></li>36<li><span >overflow19</span></li>37<li><span >overflow10</span></li>38<li><span >overflow11</span></li>39<li><span >overflow12</span></li>40<li><span >overflow13</span></li>41<li><span >overflow14</span></li>42<li><span >overflow15</span></li>43<li><span >overflow16</span></li>44<li><span >overflow17</span></li>45<li><span >overflow18</span></li>46<li><span >overflow19</span></li>47<li><span >overflow10</span></li>48<li><span >overflow11</span></li>49<li><span >overflow12</span></li>50<li><span >overflow13</span></li>51<li><span >overflow14</span></li>52<li><span >overflow15</span></li>53<li><span >overflow16</span></li>54<li><span >overflow17</span></li>55<li><span >overflow18</span></li>56<li><span >overflow19</span></li>57<li><span >overflow10</span></li>58<li><span >overflow11</span></li>59<li><span >overflow12</span></li>60<li><span >overflow13</span></li>61<li><span >overflow14</span></li>62<li><span >overflow15</span></li>63<li><span >overflow16</span></li>64<li><span >overflow17</span></li>65<li><span >overflow18</span></li>66<li><span >overflow19</span></li>67</div>68</div>6970</body>71</html>。

Css设置固定表格头部，内容可滚动

<colgroup>标签的属性定义：
属性值
描述
span 数值
规定列组应该横跨的列数
width 像素大小、占比% 规定列组合的宽度
left right align center justify ..
规定列组合的垂直对齐方式
表格css样式
<style> .main { margin:30px auto; width: 1000px; height: auto; font-size: 13px; font-family: serif; overflow: hidden; } table { border-spacing: 0; border-collapse: collapse } table th { background-color: #F4F5F7; } table, table td, table th { border: 1p { padding: 7px; height: 26px;
表格html代码
<div class="main"> <div> <table cellpadding="0" cellspacing="0" class="thead_table"> <colgroup> <col span="5" width="20%" /> </colgroup> <thead> <tr>
您使用的浏览器不受支持建议使用新版浏览器
Css设置固定表格头部，内容可滚动
效果图：实现这个效果主要用到了<colgroup>标签，来保证表格头部和内容的宽度一致。将头部<thead> 和<tbody>,分别放☞到两个div的<table>标签下。并给表格内容所在的div 设置一个固定高度即可。样式 calc(100% - 1em) 来给滚动条预留1em的宽度。

CSS中实现滚动条样式定制

CSS中实现滚动条样式定制滚动条是网页中常见的功能之一，而自定义滚动条样式则是增加网页美观度和个性化的一种方式。

本文将介绍如何使用CSS来实现滚动条样式的定制。

一、使用CSS的::-webkit-scrollbar伪元素WebKit浏览器引擎提供了一系列伪元素来定制滚动条的样式。

通过使用这些伪元素，我们可以修改滚动条的外观、颜色、大小等属性。

以下是一个示例代码，用于修改滚动条的基本样式：```css/* 修改垂直滚动条的样式 */::-webkit-scrollbar {width: 10px; /* 设置滚动条宽度 */}/* 修改滚动条轨道的样式 */::-webkit-scrollbar-track {background-color: #f1f1f1; /* 设置滚动条轨道背景颜色 */}/* 修改滚动条滑块的样式 */::-webkit-scrollbar-thumb {background-color: #888; /* 设置滚动条滑块背景颜色 */}/* 修改滚动条滑块悬停状态下的样式 */::-webkit-scrollbar-thumb:hover {background-color: #555; /* 设置滚动条滑块悬停状态下的背景颜色*/}```通过对上述代码进行修改，你可以根据个人需求来定制滚动条的样式，实现更加个性化的效果。

二、使用CSS3的scrollbar样式除了使用WebKit浏览器引擎提供的伪元素，CSS3也提供了scrollbar样式来定制滚动条的外观。

以下是一个示例代码，用于修改滚动条的基本样式：```css/* 修改滚动条的样式 */scrollbar {width: 10px; /* 设置滚动条宽度 */background-color: #f1f1f1; /* 设置滚动条背景颜色 */}/* 修改滚动条滑块的样式 */scrollbar-thumb {background-color: #888; /* 设置滚动条滑块背景颜色 */}/* 修改滚动条滑块悬停状态下的样式 */scrollbar-thumb:hover {background-color: #555; /* 设置滚动条滑块悬停状态下的背景颜色*/}```通过对上述代码进行修改，你可以根据个人需求来定制滚动条的样式，实现更加个性化的效果。

纯css，div隐藏滚动条，保留鼠标滚动效果。

纯css，div隐藏滚动条，保留⿏标滚动效果。

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。

尤其是当我们在做⼀些导航菜单的时候。

滚动条⼀出现就破坏了UI效果。

我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留⿏标滚动的效果。

这⾥介绍⼀个简单的⽅法。

⼤体思路是在div外⾯再套⼀个div。

这个div设置overflow:hidden。

⽽内容div设置 overflow-y: scroll;overflow-x: hidden;然后再设置外层div的width⼩于内层div的width。

这个内层div其实是会出现滚动条的，所以不影响⿏标的滚动效果，⽽且我们看不到滚动条了。

内层div效果：套上外层div效果后：css代码：.nav_wrap{height: 400px;width: 200px;overflow: hidden;border: 1px solid #ccc;margin: 20px auto;}.nav_ul{height: 100%;width: 220px;overflow-y: auto;overflow-x: hidden;}.nav_li{border: 1px solid #ccc;margin: -1px;height: 40px;line-height: 40px;text-align: center;font-size: 12px;width: 200px;}.btn_wrap{text-align: center;}html代码：<div class= "nav_wrap"><ul class= "nav_ul"><li class="nav_li">我是菜单1</li><li class="nav_li">我是菜单2</li></ul></div>之前的⼀个项⽬中的菜单⽤到了这个技巧。

CSS设置table下tbody的滚动条的实现

CSS设置table下tbody的滚动条的实现今天碰到⼀个关于对tabel的表的滚动事件，需求是表头不动，改变的是tbody，如果tbody⾥⾯的内容过多，让其进⾏滚动事件。

⾸先想到的就是利⽤css中overflow-y:scroll; 来进⾏内容的滚动，但是在处理tabel的display状态时，就将tabel表的布局给打乱了，如果给tabel的⽗级进⾏限制，则这个表会进⾏滚动。

在css上设置如下代码就可以了table tbody {display:block;height:200px;overflow-y:scroll;-webkit-overflow-scrolling: touch; // 为了滚动顺畅}table tbody::-webkit-scrollbar {display: none; // 隐藏滚动条}table thead, tbody tr {display:table;width:100%;table-layout:fixed;}table thead {width: calc( 100% - 1em )}table thead th{ background:#ccc;}⽰例:table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>转载⾃·威易⽹CSS教程</title><style>table tbody {display:block;height:195px;overflow-y:scroll;}table thead, tbody tr {display:table;width:100%;table-layout:fixed;}table thead {width: calc( 100% - 1em )}table thead th{ background:#ccc;}</style></head><body><table width="80%" border="1"><thead><tr><th>姓名</th><th>年龄</th><th>出⽣年⽉</th><th>⼿机号码</th><th>单位</th></tr></thead><tbody><tr><td>张三</td><td>18</td><td>1990-9-9</td><td>136********</td><td>阿⾥巴巴</td></tr><tr><td>张三封</td><td>18</td><td>1990-9-9</td><td>136********</td><td>阿⾥巴巴与四⼗⼤盗</td></tr><tr><td>张⼩三</td><td>18</td><td>1990-9-9</td><td>136********</td><td>腾讯科技</td></tr><tr><td>张三</td><td>18</td><td>1990-9-9</td><td>136********</td><td>浏阳河就业</td></tr><tr><td>张三疯⼦</td><td>18</td><td>1990-9-9</td><td>136********</td><td>阿⾥巴巴</td></tr><tr><td>张三</td><td>18</td><td>1990-9-9</td><td>136********</td><td>阿⾥巴巴</td></tr><tr><td>张⼤三</td><td>18</td><td>1990-9-9</td><td>136********</td><td>阿⾥巴巴</td></tr><tr><td>张三五</td><td>18</td><td>1990-9-9</td><td>136********</td><td>阿⾥巴巴</td></tr><tr><td>张刘三</td><td>18</td><td>1990-9-9</td><td>136********</td><td>阿⾥巴巴</td></tr><tr><td>张三</td><td>18</td><td>1990-9-9</td><td>136********</td><td>阿⾥巴巴</td></tr></tbody></table></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

∙CSS设置滚动条
样式
∙浏览器默认的滚
动条样子太过屌丝
了，得自己动手整
整。

记得IE浏览器
有几个设置滚条的
样式，不过比较鸡
肋，只能设置颜色之
类的，而且webkit
下面也不支持。

编程
网站一直想着，碰巧
发现网易邮箱的滚
动条样子很好看，一
开始以为是用div
模拟的，结果一看，
吼吼，正合我意，利用的CSS来设置的，而且是webkit浏览器的。

下面是由编程网站总结归纳的的方法。

∙webkit浏览器css设置滚动条主要有下面7个属性
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
具体所指如图例
上面是滚动条的主要几个设置属性，还有更详尽的CSS属性
:horizontal 水平方向的滚动条
:vertical 垂直方向的滚动条
:decrement 应用于按钮和内层轨道(track piece)。

它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。

)
:increment decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。

)
:start 伪类也应用于按钮和滑块。

它用来定义对象是否放到滑块的前面。

:end 类似于start伪类，标识对象是否放到滑块的后面。

:double-button 该伪类以用于按钮和内层轨道。

用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。

对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。

:single-button 类似于double-button伪类。

对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。

对内层轨道来说，它表示内层轨道是否紧靠一个single-button。

:no-button 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。

:corner-present 用于所有滚动条轨道，指示滚动条圆角是否显示。

:window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。

(在webkit最近的版本中，该伪类也可以用于::selection伪元素。

webkit团队有计划扩展它并推动成为一个标准的伪类)
写个实例demo吧（请在webkit浏览器下观看），不能光说不练。

CSS也很简单。

1 2 3 4 5 6 7 8 9
10
11
12
13
14
15
16
17
18
19
20 /* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
IE下面的CSS设置滚动条
IE下面就比较简单那了，自定义的项目比较少，全是颜色。

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/ scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/
最后吐槽下，作为三大浏览器的火狐暂时没有找到相关CSS。

前些年，火狐很火，市场占有率一度威胁到IE的第一的位置。

最近两年，火狐除了升级版本号，亮点很少；启动速度依旧很慢，内存占用居高不下，对CSS3和HTML5支持都走在各浏览器的后面。

以前是因为火狐插件比较多，在插件数量和质量被chrome 赶上来的情况下，没有理由在使用火狐了，果断转投chrome。

~。