scrollba美化

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.在样式表文件中定义好一个类，调用样式表。

Scrollbar-Face-Color为滚动条表面颜色设定；
Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定；
Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定；
Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定；
Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。
Scrollbar-Track-Color为滚动条底板颜色设定；
Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

举例：

body {
#ffffff;
color: #336699;
SCROLLBAR-FACE-COLOR: #BED8EB;
SCROLLBAR-SHADOW-COLOR: #DDF8FF;
SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1;
SCROLLBAR-3DLIGHT-COLOR: #DDF8FF;
SCROLLBAR-DARKSHADOW-COLOR: #92C0D1;
SCROLLBAR-TRACK-COLOR:#BED8EB;
SCROLLBAR-ARROW-COLOR: #92C0D1
}

scrollba美化的更多相关文章

Linux 桌面美化那点事儿
各个 Linux 桌面发行版刚拿到手的时候,或多或少都有点儿不满意,对它们进行一些改造是必须的.网上不乏各种 Linux 桌面美化的教程和经验贴,对我们这些 Linux 爱好者来说都是很好的参考资料. ...
Django admin美化插件suit应用[原创]
前言由于比较懒,自己弄了一个用户验证,没有自己写后台,用了django自带的user认证,并通过admin直接进行管理,但默认的admin并不漂亮,于是使用了这个django-suit插件,效果对比 ...
网站美化常见CSS
伴随网络时代日新月异的发展,用户不仅仅满足于软件系统的功能需求,对软件系统的页面显示效果以及交互模式的要求也逐渐提高.尤其是展示性质的平台页面对于界面美化效果要求更高,有一句话说的好:Html是结构, ...
console 输出信息美化
不久前在一些前端的网站上看到的效果,以前觉得console只是拿来做做调试,不过现在看到别人网站的console美化效果,这个还可以作为一种网站个性来显示的.. 以%c开头,后面的文字就打印的信息,后 ...
Jquery制作--美化下拉框
平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div ...
KRPano资源分析工具使用说明（KRPano XML/JS解密切片图批量下载球面图还原加密混淆JS还原美化）
软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...
select样式美化（简单实用）
美化select,可以实用一个a标签将select嵌套进去,然后将<a>相对定位,在将select绝对定位,美化<a>即可文件下载链接:https://i.cnblogs.c ...
html+css上传文件控件美化
html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
JSON对象格式美化
JSON.stringify(obh, null, "\t"); 这段代码就可以对某个js对象美化输出

随机推荐

RN组件之ScrollView
一.ScrollView 该组件封装了Android平台的ScrollView(滚动组件),并且提供触摸事件"responder"系统功能.使用ScrollView的时候确保有一 ...
rbegin 和 end 区别
在使用C++的STL时,经常会用到迭代器,那么不得不搞清楚里面的一些指针 begin(), end(), rbegin(), rend()之间的区别与联系,以及它们分别都指向哪个元素.首先要明白的一点 ...
使用XHTML+CSS构架的好处到底有哪些？
使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰. 1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{ma ...
HTML练习----注册界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
discuz门户首页-header文件模板语法详解和注释
header文件引用了跟多通用模板,所以整个文章会很长,现在比较忙,注释工作会不定期进行首先开下门户首页的文件 portal里面的index.htm <!--{template common/ ...
[IT学习]PowerBi 入门
从哪里开始呢?注册一个账号,从PowerBi的help开始就行了.Get Started会带领你从get data讲起,建立dataset,建立report,一直到dashboard创建. 下面这个链 ...
NV OIT algorithm : Depth peeling is a fragment-level depth sorting technique
https://developer.nvidia.com/content/interactive-order-independent-transparency Correctly rendering ...
PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...
eclipse中project->clean的作用是什么
1.由于eclipse的编译是基于时间戳的判断机制的.因此当你按build all的时候有些eclipse认为时间戳没有改变的类不会被编译.因此你可以先clean一下再编译.这个时候eclipse ...
利用SpannableString设置文本
private void setTips(){ String big = "大字深色"; String small = "小字淡色"; Spannable ti ...

scrollba美化

scrollba美化的更多相关文章

随机推荐

热门专题