玩转网页滚动条

0 views
Skip to first unread message

小菜

unread,
Jun 24, 2005, 3:06:32 AM6/24/05
to s8...@googlegroups.com
网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,但是千篇一律的它经常会给整体页面效果拖了不少后腿,我们能不能改变它灰灰的样子呢?能!俗话说:"只有你想不到的,没有做不到的。"

给滚动条换色


几乎所有网页的滚动条都是默认的灰色,如果把它的颜色换换,来点另类的,相信一定会使网页更加靓丽。我们只要在网页代码<head>
</head>之间插入下面的代码,即可随心所欲地更改颜色了。

<style>
BODY {
SCROLLBAR-FACE-COLOR: #144AA0; //(立体滚动条凸出部分的颜色)
SCROLLBAR-SHADOW-COLOR: #6CB4D8; //(立体滚动条阴影的颜色)
SCROLLBAR-ARROW-COLOR: #F0F0F0;
//(上下按钮上三角箭头的颜色)
SCROLLBAR-BASE-COLOR: #144AA0; //(滚动条的基本颜色)
SCROLLBAR-HIGHLIGHT-COLOR: #144AA0; //(滚动条空白部分的颜色)
SCROLLBAR-DARKSHADOW-COLOR: #144AA0; //
(立体滚动条强阴影的颜色)
}
</style>



后面的16进制颜色值你可以根据喜好随意更改,括号内是解释说明,在输入时请不要插入。

隐藏滚动条

在任何情况下,如果网页超出显示范围,就会出现滚动条。但有时我们并不想让它显示,如何隐藏它呢?只需将代码<body>更改为:<
body
style="overflow-x:hidden;">即可,其中x表示水平滚动条,将其改为y的话就可以隐藏垂直滚动条。如果想要水平和垂直滚动条都隐藏的话直接改成:<body
style="overflow:hidden;">即可。

滚屏显示

当网页中有长篇文章时,浏览起来就比较吃劲了,想想一边忙着拖动滚动条,一边忙着浏览,确实挺累人的。为了客人能够轻松的浏览,我们可以使用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>

Reply all
Reply to author
Forward
0 new messages