CSS 控制滚动条样式

顺晟科技

2022-09-15 21:10:28

153

在360浏览器中设置滚动条隐藏样式以下可直接实现隐藏功能

1 ::-webkit-scrollbar {/*隐藏滚轮*/
2　　 display: none;
3 }

如果要兼容 PC 其他浏览器（Firefox 、IE6、IE8、Google等）设置滚动条隐藏样式，在容器（div）外面再嵌套一层overflow:hidden内部边框宽高限制尺寸和外部嵌套在一起，就可以隐藏了（内部把外部的滚动条给覆盖了）！

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 *{
 8     margin: 0px;
 9     padding: 0px;
10 }
11 /*
12 内层div一定要和外层div的高设置一致，如果外大里小 底部将会出现空白区域
　　如果有滚动，高度一定要小于当前页面高度
13 */
14 /*    外层div*/
15 .nav_div{
16     width:1366px;    /*设置页面内容原本宽度*/
17     height: 631px;        /*设置页面高度*/
18     overflow-x: hidden;   /*隐藏x横向的滚动轮*/
19     overflow-y: hidden;     /*隐藏y纵向的滚动轮*/
20 }
21 /*内层内容div*/
22 .nav_indiv{
23     width:1386px;     /*设置页面覆盖滚动轮宽度*/
24     height: 631px;        /*设置页面高度*/
25     overflow-y:scroll;"        /*总是显示纵向滚动条 */
26 }    
27 #nav_background{
28     width: 1366px;
29     height: 2140px;
30     background: url( images/neiye/neiye2.jpg) no-repeat;
31     background-size:100%;  /*图片设置为自适应100%，也可用contain*/
32 }    
33 #nav_zuo{
34     width: 67px;
35     height: 171px;
36     font-size: 37px;
37     color: #beab86;
38     font-weight: bold;
39     position: relative;
40     top: 350px;
41     margin-left: 300px;
42 }
43 #name_next{
44     width: 67px;
45     height: 171px;
46     font-size: 37px;
47     color: #beab86;
48     font-weight: bold;
49     margin-top: 958px;
50     margin-left: 300px;
51 }
52 </style>
53 </head>
54
55 <body>
56 <div class="nav_div">    <!--加一个最大的div-->
57     <div class="nav_indiv">    <!--加一个内层的内容div-->
58         <div id="nav_background">
59             <div id="zuoname">
60                 <div id="nav_zuo">测试名字测试名字测试名字测试</div>
61                 <div id="name_next">宴会形式测试名字测试名字测试（冷餐会）</div>
62                 <div class="go"></div>
63             </div>
64         </div>
65     </div>    
66 </div>
67 </body>
68 </html>

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容，其用到的表现形式和值有以下几种

overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条

<body style=\'overflow:scroll;overflow-x:hidden\'> /*去掉横向滚动条*/
<body style=\'overflow:scroll;overflow-y:hidden\'> 　　/* 去掉竖向滚动条*/
<body scroll="no"> /*两个都去掉*/

以上三个属性设置的值为visible、scroll、hidden、auto

visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。

滚动条overflow属性的应用

1  
2 /*没有水平滚动条*/ 
3 <div style="overflow-x:hidden">name</div> 
4 /*没有垂直滚动条*/ 
5 <div style="overflow-y:hidden">name</div> 
6 /*没有滚动条*/ 
7 <div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">name</div> 
8 /*自动显示滚动条*/ 
9 <div style="height:100px;width:100px;overflow:auto;">name</div>

自定义滚动条的样式实例

 1 Body {}{ 
 2 scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ 
 3 scrollbar-face-color: #333; /*立体滚动条的颜色*/ 
 4 scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜 
 5 色*/ 
 6 scrollbar-highlight-color: #666; /*滚动条空白部分的 
 7 颜色*/ 
 8 scrollbar-shadow-color: #999; /*立体滚动条阴影的颜 
 9 色*/ 
10 scrollbar-darkshadow-color: #666; /*立体滚动条强阴 
11 影的颜色*/ 
12 scrollbar-track-color: #666; /*立体滚动条背景颜色*/ 
13 scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/ 
14 Cursor:url(mouse.cur); /*自定义个性鼠标*/ 
15 }

上一篇：用CSS调整scrollbar(滚动下一篇：DIV滚动条设置添加 CSS滚动条显

网站建设

Css

CSS 控制滚动条样式