`
laozhou
  • 浏览: 36604 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

自定义<body>滚动条

浏览器 
阅读更多
body,    div     
   {     
       SCROLLBAR-HIGHLIGHT-COLOR:    #FFFFFF;    /*滚动条及箭头的亮边色*/     
       SCROLLBAR-SHADOW-COLOR:    #E1E1E1;          /*滚动条及箭头的暗边色*/     
       SCROLLBAR-3DLIGHT-COLOR:    #E1E1E1;        /*滚动条及箭头的3D亮边色*/     
       SCROLLBAR-TRACK-COLOR:    #E1EDFD;            /*滚动条底色*/     
       SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF;    /*滚动条及箭头的暗边阴影色*/     
       SCROLLBAR-BASE-COLOR:    #9BBBF4;              /*滚动条的基本颜色*/     
       SCROLLBAR-ARROW-COLOR:    #35507A;            /*箭头的颜色*/     
       SCROLLBAR-FACE-COLOR:    #9BBBF4;              /*滚动条及箭头的颜色*/     
   } 
2)（某些样式需ie5.5+才能支持）：   
   1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）   
   overflow-x水平方向内容溢出时的设置   
   overflow-y垂直方向内容溢出时的设置   
   以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。     
   2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）   
   scrollbar-arrow-color上下按钮上三角箭头的颜色   
   scrollbar-base-color滚动条的基本颜色   
   scrollbar-dark-shadow-color立体滚动条强阴影的颜色   
   scrollbar-face-color立体滚动条凸出部分的颜色   
   scrollbar-highlight-color滚动条空白部分的颜色   
   scrollbar-shadow-color立体滚动条阴影的颜色     
   我们通过几个实例来讲解上述的样式属性：   
   1.让浏览器窗口永远都不出现滚动条   
   没有水平滚动条   
   <body    style="overflow-x:hidden">   
   没有垂直滚动条   
   <body    style="overflow-y:hidden">   
   没有滚动条   
   <body    style="overflow-x:hidden;overflow-y:hidden">或<body     
   style="overflow:hidden">     
   2.设定多行文本框的滚动条    
   没有水平滚动条   
   <textarea    style="overflow-x:hidden"></textarea>   
    
   没有垂直滚动条   
   <textarea    style="overflow-y:hidden"></textarea>   
    
   没有滚动条   
   <textarea    style="overflow-x:hidden;overflow-y:hidden"></textarea>   
   或<textarea    style="overflow:hidden"></textarea>   
    
   3.设定窗口滚动条的颜色   
   设置窗口滚动条的颜色为红色<body    style="scrollbar-base-color:red">   
   scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。   
   加上一点特别的效果：   
以下是引用片段：
   <body    style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">  
4.在样式表文件中定义好一个类，调用样式表。   
以下是引用片段：
以下是引用片段：
   <style>     
   .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}     
   </style>
 
   这样调用：   
   <textarea    class="coolscrollbar"></textarea>   
分享到：
| java生成UUID
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    售卡网站系统

    &lt;br&gt;2、滚动新闻，可由后台增加。&lt;br&gt;3、预留在线支付接口。&lt;br&gt;4、拥有产品管理系统。&lt;br&gt;5、在线留言系统，用户可以审核留言。&lt;br&gt;6、用户可以对新闻大类进行自定义； &lt;br&gt;7、 用户可以对新闻小类进行自定义； &lt;br...

    jQuery详细教程

    &lt;/body&gt; &lt;/html&gt; 亲自试一试 在上面的例子中，当按钮的点击事件被触发时会调用一个函数： $("button").click(function() {..some code... } ) 该方法隐藏所有 &lt;p&gt; 元素： $("p").hide(); 单独文件中的函数 如果您的...

    JavaScript Table行定位效果

    &lt;body&gt; &lt;table cellpadding="5" cellspacing="0" border="1" width="100"&gt; &lt;tr style="position:relative; left:100px;"&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;4&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; ...

    js自定义图片左右滚动条切换效果

    现在网上流行好多可以自定义图片横向滚动条的效果，可惜大部分都是jQuery实现的，且兼容性不好。 今天特意整理了一款js实现的图片横向自定义滚动条效果，兼容目前主要浏览器（IE6已被忽略）。 喜欢的童鞋...

    html入门到放弃笔记

    标记在使用时，用尖括号 "&lt;&gt;",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法：&lt;标记&gt;内容&lt;/标记&gt; Demo ： 1、创建 p 标记 --&lt;p&gt;...&lt;/p&gt; 2、创建 div 标记 -- &lt;div&gt;&lt;/div&gt; 3、创建 ...

    自定义滚动条3.0

    滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子 支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条） 支持键盘...

    javascript中select下拉框的用法总结

    本文针对开发项目中遇到的问题，进行了汇总 问题1：如何选择select的option里面的值？ 首先会用到一个方法 onchange（）；这个方法主要用于触发，选择框... &lt;option&gt;七里香&lt;/option&gt; &lt;/select&gt; &lt;script typ

    ASP.NET常用代码

    id='&lt;%# DataBinder.Eval(Container.DataItem, "数据字段1")%&gt;' & name='&lt;%# DataBinder.Eval(Container.DataItem, "数据字段2")%&gt;' /&gt; 7.表格点击改变颜色 if (e.Item.ItemType == ListItemType.Item ||e.Item....

    js滚轮事件 自定义滚动条的实现

    本文实例为大家分享了js自定义滚动条的实现的具体代码，供大家参考，具体内容如下 描述： 自定义滚动条的实现 效果： 实现： &lt;!DOCTYPE html&gt; &lt;html lang=""&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt...

    cms后台管理

    &lt;li&gt;&lt;a href="${a.url}" target="_blank"&gt;${a.title}&lt;/a&gt;&lt;/li&gt; [/#list] 就是简单的将tag_list中的内容，即“paramWrap.put(OUT_LIST, DEFAULT_WRAPPER.wrap(list));”中放入的数据遍历出来 style_2-1.html中的...

    ASP.NET程序中常用的三十三种代码.txt

    　&lt; %# DataBinder.Eval(Container.DataItem, "数据字段1")%&gt;’ & name=’&lt;% # DataBinder.Eval(Container.DataItem, "数据字段2")%&gt;’ /&gt; 　7.表格点击改变颜色 if (e.Item.ItemType == ListItemType.Item ||e....

    107个常用javascript语句

    81.JS中的窗口滚动条:window.scroll(x,y) 82.JS中的窗口滚动到位置:window.scrollby 83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout 84.JS中的模態显示在IE4 行,...

    图片与JavaScript配合做出个性滚动条

    图片与JavaScript配合做出个性滚动条 * { margin:0; padding:0; } body { margin:20px 0 400px 20px; font:12px Arial; } h1 { font-size:14px; } ol { margin:20px; line-height:160%; } #out { position:relative...

    JS滚动列表加载

    id：滚动条id，不可以是body； id2：滚动列表的id，通过function自行根据情况返回； action：数据来源的ajax地址，插件会自动加上page和length(分别表示请求页数和当前已有记录数)，返回格式统一是[{},{}...]，此类...

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    fixPosition:true, //随滚动条浮动 dragOut:false, //不允许拖出页面 autoClose:true, //点击按钮后自动关闭页面 maskAlphaColor:'#000', //遮罩透明色 maskAlpha:0.1, //遮罩透明度 winAlpha:0.8, //...

    react-采用比IScroll更加轻量的JRoll封装的React组件

    采用比IScroll更加轻量的JRoll封装的React组件，可以作为移动端DOM内部CSS3滚动的组件。为了解决移动端body中有多层滚动重叠导致的卡顿和点击穿透问题而封装的React滚动组件

    46种常见的浏览器兼容性问题大汇总

    20. 为什么web标准中IE无法设置滚动条颜色了 3 21. 为什么无法定义1px左右高度的容器 3 22. 链接(a标签)的边框与背景 3 23. 超链接访问过后hover样式就不出现的问题 3 24. FORM标签 3 25. 属性选择器(这个不能...

Magicbox
Global site tag (gtag.js) - Google Analytics