网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,但是千篇一律的它经常会给整体页面效果拖了不少后腿,我们能不能改变它灰灰的样子呢?能!俗话说:“只有你想不到的,没有做不到的。”
给滚动条换色
几乎所有网页的滚动条都是默认的灰色,如果把它的颜色换换,来点另类的,相信一定会使网页更加靓丽。我们只要在网页代码<head> </head>之间插入下面的代码,即可随心所欲地更改颜色了。
浏览器滚动条自由可观设置:
http://www.leesum.com/use/gun.htm<style>
body {SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色)
SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色)
SCROLLBAR-SHADOW-COLOR:#fc2400;(立体滚动条阴影的颜色)
SCROLLBAR-ARROW-COLOR:#666666;(上下按钮上三角箭头的颜色)
SCROLLBAR-BASE-COLOR:#333333; (滚动条的基本颜色)
SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48} (立体滚动条强阴影的颜色)
</style>
后面的16位颜色值你可以随意更改,括号内是解释说明,在输入时请不要插入。
隐藏滚动条
在任何情况下,如果网页超出显示范围,就会出现滚动条。但有时我们并不想让它显示,如何隐藏它呢?只需在<body> </body>之间插入代码:<body style="overflow-x:hidden;overflow-y:hidden">即可。其中x表示水平滚动条,将其改为y的话就可以隐藏垂直滚动条。
滚屏显示
当网页中有长篇文章时,浏览起来就比较吃劲了,想想一边忙着拖动滚动条,一边忙着浏览,确实挺累人的。为了客人能够轻松的浏览,我们可以使用script代码实现网页的自动滚屏,当双击网页的时候,网页将会自动向下滚动,再次单击时滚动停止。将下面的代码插入到<body> </body>之间。
<script language"javascript">
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</script>
05-08-29 补充=======================================================
1.overflow内容溢出时的设置
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
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.设定其他元素时,基本上一样,你最好是在样式表文件中定义好一个类,这样你就可以重复使用了。
.coolscrollbar
{
scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon;
}
将以上语句加入到样式表文件中或html头部的<style></style>当中,然后使用
<textarea class="coolscrollbar"></textarea>
分享到:
相关推荐
超酷带纹理网页滚动条效果 超酷带纹理网页滚动条效果 超酷带纹理网页滚动条效果 超酷带纹理网页滚动条效果 超酷带纹理网页滚动条效果 超酷带纹理网页滚动条效果
但对于一些人来说要加入这些代码还不是那么容易,或者当您要将您网站的网页全部换一个滚动条的风格的话,可就不那么容易了,而使用"网页美化之滚动条"您可以轻松添加/更改一个网页或网站的滚动条颜色!
网页滚动条样式css智能配色器 网页滚动条样式css智能配色器 网页滚动条样式css智能配色器
JS自定义滚动条 可以自定义 很多类型的网页滚动条,跳出了传统的滚动条式样.
HTML网页滚动条滚动插件(匀速滚动,支持向上向下滚动)
Qt悬浮滚动条-滚动条样式,实现滚动条不占用控件的宽高,深度美化滚动条以及Qt滚动条的使用体验
对网页滚动条的隐藏及显示控制.rar对网页滚动条的隐藏及显示控制.rar对网页滚动条的隐藏及显示控制.rar对网页滚动条的隐藏及显示控制.rar对网页滚动条的隐藏及显示控制.rar
vc自定义滚动条外观 制作五颜六色的滚动条(水平滚动条,垂直滚动条).zip
MFC对话框实现垂直和水平滚动条,欲知道如何实现,请下载! //在OnInitDialog里添加如下代码为对话框创建一个垂直滚动条和水平滚动条 //获取窗口的大小 CRect rc; GetClientRect(&rc); const SIZE sz = { rc....
网上很多自绘滚动条 但要么是只支持编辑框滚动条的 树形控件的垂直滚动条要特殊处理 因为THUNM POSION消息不响应(貌似是这么个消息 具体名字忘了) 要么是接口功能不够完善 附件中含清晰的demo实例 滚动条类中思路...
网页局部div随滚动条置顶滚动 效果很好,跟普通的滚动不太一样,没有延迟。
去掉水平滚动条: <body hidden"> 去掉竖直滚动条: <body hidden"> 隐藏横向滚动条,显示纵向滚动条: <body
系统默认的滚动条太死板了,想要自定义css 滚动条 自定义滚动条 美化滚动条
动态滚动条动态滚动条动态滚动条动态滚动条动态滚动条动态滚动条动态滚动条
百度里搜了一下,原来已经有高手采用jquery来改变滚动条的单调样式了。 首先要引用两个脚本:jquery.js,jscroll.js; 接着为要出现滚动条的位置写上overflow:auto;这时会出现滚动条,最原始的样子。接着,加上...
制作网页中的滚动条 制作网页中的滚动条 制作网页中的滚动条
控件_滚动条控件_滚动条控件_滚动条控件_滚动条控件_滚动条控件_滚动条控件_滚动条
JQuery滚动条兼容所有浏览器 JQuery滚动条插件 同时可以具备一个页面上有多个滚动条显示 但须其优先级最高 比如您要触发某个滚动条 就须在触发后其优先级最高 即可!
div滚动条 带滚动条的div div滚动条样式div滚动条 带滚动条的div div滚动条样式
iframe的滚动条问题:显示隐藏滚动条.doc