CSS 控制滚动条样式

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

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

 

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

 1 
 2 
 3 
 4 
 5 
 6 
53 
54
55 
56 
    
57     
    
58         

59             

60                 
测试名字测试名字测试名字测试
61                 
宴会形式测试名字测试名字测试（冷餐会）
62                 

63             
64         
65     
    
66 
67 
68 

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

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

   /*去掉横向滚动条*/
　　 /* 去掉竖向滚动条*/
   /*两个都去掉*/ 

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

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

 

滚动条overflow属性的应用 

1  
2 /*没有水平滚动条*/ 
3 
name
 
4 /*没有垂直滚动条*/ 
5 
name
 
6 /*没有滚动条*/ 
7 
name
 
8 /*自动显示滚动条*/ 
9 
name
 

自定义滚动条的样式实例

 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 }

 

转载于:https://www.cnblogs.com/1301694f/p/8563956.html