CSS网页滚动条与无滚动条代码
>首页 -> 社会专题 -> 代码效果 2013-05-23 来源:网易 作者: 【】 浏览:1026

在这篇文章中我要讲的不仅仅是对滚动条的美化,还有添加滚动条和去掉滚动条的方法

这里先说一下滚动条的属性代码:

overflow-y : visible | auto | hidden | scroll 

visible :  不剪切内容也不添加滚动条。

auto :  在需要时剪切内容并添加滚动条 

hidden :  不显示超过对象高度的内容,这里不对这个属性作介绍,大家喜欢的话可以自己尝试

scroll :  总是显示纵向滚动条

首先我现说一下去掉滚动条的方法:

如果用百度风格模版的话,滚动条只可能有一个,那就是整个空间右边最大的浏览器窗口滚动条,也就是我美化过的那个滚动条,现在告诉大家,我们可以把这个滚动条去掉,但是却不影响浏览的方法:

body{}中加入overflow-y : visible就可以了,这样滚动条就不会显示出来了。大家可能会问,这样怎么往下拉?呵呵,既然我说了不影响浏览,那当然是有方法的,浏览的方法就是用鼠标的滚轮,虽然滚动条没了,可是鼠标滚轮还是能够让网页上下滚动的。我相信大家一般浏览网页的时候用滚轮下拉网页的次数应该比直接用鼠标拖动滚动条的次数多吧?提示下,如果碰到没有滚动条而鼠标又没有滚轮的朋友,该怎么浏览网页呢?呵呵,大家可以用键盘上面的方向键上方的PageUp和PageDown来上下翻页,也可以用空格往下拉网页和Shift+空格往上拉网页,还有一个方法就是用上下方向键来拉动,另外还有按Home键回到网页顶部,End键到达网页底部,呵呵,是不是方法很多呢?不过这样总会有那么一些些的不方便,所以大家可以根据自己的空间和喜好来考虑要不要取消这个滚动条。

哈哈,想不到啰哩叭嗦地,一下说了这么多话

下面我们说添加滚动条的方法:

overflow-y : auto;height:多少px 

auto就是自动判断要不要加入滚动条,当设定的对象内容超过了height设定的高度时,就自动添加滚动条,不然则不显示,body{}中的默认值就是overflow-y : auto;height:浏览器高度,所以当网页内容超过浏览器高度的时候,浏览器右边就会自动显现出滚动条来

大家如果需要设置这个的话,本人建议设置在最新评论#m_comment{}、文章列表#m_blog{}等内容和高度都不固定的模版中,有的朋友找不到这些模版的ID,可能只有例如#m_comment div.item{}或者#m_pro a{}等的ID,那么可以自己加上没有的ID,这样就可以设置了

这里还有另一个添加滚动条的方法:

overflow-y :scroll

这个参数的作用上面解释过了,不过如果只加这个参数的话,虽然滚动栏会显示,但是不会显示滚动条,所以必须还要加上一个

height:多少px

高度属性,跟上面的那个方法差不多,但是有根本的区别,这个无论对象内容的高度是否超过了height设定的高度,滚动栏永远都会显示在边上的

下面我们说一下关于滚动条的美化,这个我朋友给我看了网上的一个说明,我觉得上面的图很不错,但是很小,所以我放大了一倍,看起来就清楚多了,我们先说一下美化的各个属性:

SCROLLBAR-FACE-COLOR: 颜色代码

SCROLLBAR-HIGHLIGHT-COLOR:颜色代码

SCROLLBAR-SHADOW-COLOR: 颜色代码

SCROLLBAR-3DLIGHT-COLOR: 颜色代码

SCROLLBAR-ARROW-COLOR: 颜色代码

SCROLLBAR-TRACK-COLOR: 颜色代码

SCROLLBAR-DARKSHADOW-COLOR: 颜色代码

大家是不是看到这么多属性有点点头大了?哈哈,放心,看一下我刚才提及的被我放大了一倍的图解你们就会感觉好多了:

这里的图片上还有一个scrollbar-base-color的属性,其实这个属性是个上面7个属性的总合,怎么说呢?就是当你设定了这个属性的颜色后,前面的7个属性都可以不用设置了,滚动条会自动帮你设定的,只是这个设定都会基于你设定的scrollbar-base-color的颜色而自动设定

这个属性的优点就是不用大家费尽心思的去研究各个地方的颜色,但是缺点就是不能够融和五颜六色于一体。。

注:设定了scrollbar-base-color就不要设定其他七个属性了,设定了其他七个属性就不要设定scrollbar-base-color,不然之间可能会有冲突,会有一些效果不起作用的

最后,美化代码:

SCROLLBAR-FACE-COLOR: #CCFFFF; 

SCROLLBAR-HIGHLIGHT-COLOR: white; 

SCROLLBAR-SHADOW-COLOR: #813533; 

SCROLLBAR-3DLIGHT-COLOR: #813533; 

SCROLLBAR-ARROW-COLOR: #813533; 

SCROLLBAR-TRACK-COLOR: white; 

SCROLLBAR-DARKSHADOW-COLOR: #813533;   

以上代码本人是加在body{}中的

CSS网页滚动条与无滚动条代码

您看到此篇文章时的感受是:
Tags: 责任编辑:佚名
免责申明: 除原创及很少部分因网文图片遗失而补存外,本站不存储任何有版权的内容。你看到的文章和信息及网址索引均由机器采集自互联网,由于时间不同,内容可能完全不同,请勿拿本网内容及网址索引用于交易及作为事实依据,仅限参考,不会自行判断者请勿接受本站信息,本网转载,并不意味着赞同其观点或证实其内容的真实性.如涉及版权等问题,请立即联系管理员,我们会予以更改或删除,保证您的权利.对使用本网站信息和服务所引起的后果,本网站不作任何承诺.
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论:0条】 【关闭】 【返回顶部
更多
上一篇IE6支持PNG透明 下一篇3D特效字符
密码: (新用户注册)

最新文章

图片主题

热门文章

推荐文章

相关文章

便民服务

手机扫描

空间赞助

快速互动

论坛互动
讨论留言

有事联系

有哪个那个什么的,赶紧点这里给DOVE发消息

统计联系

MAIL:gnlt@Dovechina.com
正在线上:

版权与建议

任何你想说的