欢迎光临
我们一直在努力

css实现滚动条美化

建站超值云服务器,限时71元/月

随着网页设计内容的丰富多彩,设计们越来越注重网页设计的风格。滚动条美化,可以为网站的美观程度增色不少,使用户的体验度更加地友好!滚动条的美化实现网页的美观已经越来越成为今后网页设计的方向!

首先小编先说一下去掉滚动条的方法:
如果用百度风格模版的话,滚动条只可能有一个,那就是整个空间右边最大的浏览器窗口滚动条,现在可以把这个滚 动条去掉,但是却不影响浏览的方法,以达到滚动条美化的效果:
在body{}中加入overflow-y :visible就可以了,这样滚动条就不会显示出来了。大家可能会问,这样怎么往下拉?呵呵,既然我说了不影响浏览,那当然是有方法的,浏览的方法就是用鼠标的滚轮,虽然滚动条没了,可是鼠标滚轮还是能够让网页上下滚动的。我相信大家一般浏览网页的时候用滚轮下拉网页的次数应该比直接用鼠标拖动滚动条的次数多吧?提示下,如果碰到没有滚动条而鼠标又没有滚轮的朋友,该怎么浏览网页呢?呵呵,大家可以用键盘上面的方向键上方的pageup和pagedown来上下翻页,也可以用空格往下拉网页和shift+空格往上拉网页,还有一个方法就是用上下方向键来拉动,另外还有按home键回到网页顶部,end键到达网页底部,呵呵,是不是方法很多呢?不过这样总会有那么一些些的不方便,所以大家可以根据自己的空间和喜好来考虑要不要取消这个滚动条。

去掉水平滚动条:

去掉竖直滚动条:

隐藏横向滚动条,显示纵向滚动条:

全部隐藏

或者是

如果是框架页,利用上面的方法仍不能去除可考虑以下办法:
被包含页面里加入

html { overflow-x:hidden; }

如果想隐藏垂直滚动条:

html { overflow-y:hidden; }

这里先说一下滚动条美化的属性代码:
overflow-y : visible | auto | hidden | scroll
visible :  不剪切内容也不添加滚动条。
auto :  在需要时剪切内容并添加滚动条
hidden :  不显示超过对象高度的内容,这里不对这个属性作介绍,大家喜欢的话可以自己尝试
scroll :  总是显示纵向滚动条

下面系统天堂小编说说另一种滚动条美化的方法–添加滚动条:
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: 颜色代码;
前面的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{}中的。

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » css实现滚动条美化
分享到: 更多 (0)