/*作为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 控制滚动条样式的更多相关文章

  1. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  2. CSS控制列表样式属性list-style有哪些？怎么用？

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  3. CSS设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

  4. CSS设置滚动条样式[转]

    原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可 ...

  5. 转载自前端开发：CSS设置滚动条样式

    浏览器默认的滚动条样子太过屌丝了,得自己动手整整.记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持.无意间看到网易邮箱的滚动条样子很好看,一开始以为是 ...

  6. django 1.9.7 css控制模板样式

    问题:css样式不能控制html样式(针对开发环境,不针对生产环境) 现象: django.template.exceptions.TemplateSyntaxError: Invalid block ...

  7. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  8. 【学习DIV+CSS】2. 学习CSS（一）--CSS控制页面样式

    1. CSS如何控制页面 使用XHTML+CSS布局页面,其中有一个很重要的特点就是“结构与表现相分离”(结构指XHTML,表现指CSS).有人这样描述这种分离的关系,结构XHTML好比一个人,表现C ...

  9. CSS 个性化滚动条样式

    页面中有许多内容过多时,为了不影响整体布局,总会有滚动效果代替.but,许多情况浏览器自带的滚动条样式与整体UI 界面不搭啊,怎么办,当然作为界面的化妆师CSS就出手啦~ 滚动条样式由多个伪类组成 下 ...

随机推荐

  1. csv文件批量导入数据到sqlite。

    csv文件批量导入数据到sqlite. 代码: f = web.input(bs_switch = {})  # bs_switch 为from表单file字段的namedata =[i.split( ...

  2. Django model 中meta options

    之前学了abstract,这是后续的一些options app_label: app_label的作用是:如果一个model定义不在INSTALLED_APPS中,那么此时就需要声明,这个model的 ...

  3. Range-Based for Loops

    for ( decl : coll ) { statement } where decl is the declaration of each element of the passed collec ...

  4. 关于javascript tween的学后小感想

    今天决定了解一下tween算法,首先得下载个tween.js看看吧,好吧,有点被惊艳到了. 也让我想起了之前上数学课时,听到过的一句话:“数学世界是神秘.纯洁.有魅力的”,一直 记得这句话,期待有朝一 ...

  5. MoleHill Getting Started AGAL（转）

    1.The OpCode This is what AGAL looks like: //vertex shader m44 op, va0, vc0 // pos to clipspace mov ...

  6. 执行powershell脚本

    打开powershell运行窗口: powershell.exe C:\Users\Administrator\Desktop\a.ps1 -a $a. -a $a :  vbs脚本路径(如 C:\h ...

  7. 'Invalid parameter not satisfying: body'

    afnetwork图片上传的时候出错,出现错误 2015-11-09 15:47:59.086 videoPro[3207:132795] *** Assertion failure in -[AFS ...

  8. [winserver]设置Server2008R2远程桌面允许每个用户运行多个会话

    首先打开"服务器管理器",选择"角色"-在对话框右边部分选择"添加角色" 根据提示一步步安装即可. 然后在角色中找到"远程桌面服务 ...

  9. Linux kill 杀死指定进程

    一  杀死指定进程 现知道有一个php线程正在运行,需要杀死 root 26278 1 0 2015 ? 00:00:31 /usr/local/php/bin/php /var/www/html/r ...

  10. 使用Autofac在MVC中实现IOC

    var builder = new ContainerBuilder(); //注册DispatchService类型到工厂中 builder.RegisterType<DispatchServ ...