1,Overflow内容溢出时的设置

overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置

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

visible 默认值。使用该值时，无论设置的"width"和"height"

的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内

容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。

应用:

没有水平滚动条:
<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</di

v>

2,自己定义滚动条的颜色

我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样

子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,

分别注释在下面的css代码的后面了,注意css的注释代码是放在

两个斜杠内的两个星号之间,如:/*这里放注释的代码*/

Body {
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜

色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的

颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜

色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴

影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}

以上2项适用与<body>、<div>、<textarea>、<iframe>

css 滚动条样式的更多相关文章

  1. HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等

    友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...

  2. css滚动条样式修改

    .activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollb ...

  3. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

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

    概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...

  5. CSS滚动条样式定制

    效果图如下 <!DOCTYPE html> <!-- saved from url=(0061)http://www.xuanfengge.com/demo/201311/scrol ...

  6. css滚动条样式自定义

    很简单的几行代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. css滚动条样式

    1.横向滚动条:(abeamScroll) <div style="width:400px;height:200px;overflow-x:auto;overflow-y:hidden ...

  8. 在css中定义滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

  9. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

随机推荐

  1. intellij 出现“Usage of API documented as @since 1.8+”的解决办法

    intellij 出现“Usage of API documented as @since 1.8+”的解决办法 Usage of API documented as @since 1.8+ This ...

  2. Java编程的逻辑 (37) - 泛型 (下) - 细节和局限性

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  3. 在c#中过滤通过System.IO.Directory.GetDirectories 方法获取的是所有的子目录和文件中的系统隐藏的文件(夹)的方法

    //读取目录 下的所有非隐藏文件夹或文件 public List<FileItem> GetList(string path) { int i; string[] folders = Di ...

  4. js下判断 iframe 是否加载完成的完美方法

    一般来说,我们判断 iframe 是否加载完成其实与 判断JavaScript 文件是否加载完成.     采用的方法很类似: var iframe = document.createElement( ...

  5. 微信WeixinJSBridge的接口使用

    以下都要包含weixinApi.js(见底部git里的js文件) 1).分享 WeixinApi.ready(function(Api) { // 微信分享的数据 var wxData = { &qu ...

  6. 迷茫于Hibernate/JPA的人提一些建议。

    想对那些“迷惑”于Java ORM框架的J2EE开发人员提一些建议,希望能够对他们 更深入的理解和运用J2EE ORM框架来提速工作有所帮助,这些建议可能显得有些”陈旧“和”肤浅“, 因为最近半年我没 ...

  7. 2018 Arab Collegiate Programming Contest (ACPC 2018) H - Hawawshi Decryption 数学 + BSGS

    H - Hawawshi Decryption 对于一个给定的生成数列 R[ 0 ] 已知, (R[ i - 1 ] * a + b) % p = R[ i ] (p 是 质数), 求最小的 x 使得 ...

  8. 7-9The Morning after Halloween uva1601

    这题可以用普通bfs来做  也可以用双向bfs来做(先欠着) 有点类似专题训练的一题   不过那题是找钥匙开门   不过都用了状态压缩 题意:  n,m(<=16) 的网络上有t(<=3) ...

  9. 008.FTP单独虚拟用户

    一 单独虚拟用户概念 给每个虚拟用户单独建立目录,并建立自己的配置文件,方便单独配置权限,并可以单独制定上传目录. 二 单独为虚拟用户设置权限 2.1 创建用户单独保存虚拟用户配置文件的目录 [roo ...

  10. 一个线上程序bug，由通用补数程序引起

    下游发现接口可用率非100%,马上线上查看,发现数据在有些情况下通用补数的数据是空, 有20%的用户是没有相应偏好等的数据的,需要通用补数来补数,结果通用补数没有数据. 通用补数数据的检查报警时必须要 ...