您的位置：首页 > Web前端 > CSS

【CSS】如何去除页面滚动条

2015-12-27 16:47 531 查看

去掉水平滚动条：

<body style="overflow-x: hidden">

去掉竖直滚动条：

<body style="overflow-y: hidden">

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

<body style="overflow-x:hidden;overflow-y:scroll">

全部隐藏

<body style="overflow:hidden">

或者是

<body scroll="no">

如果是框架页，利用上面的方法仍不能去除可考虑以下办法：

被包含页面里加入

<style>
html { overflow-x:hidden; }
</style>

如果想隐藏垂直滚动条:

<style>
html { overflow-y:hidden; }
</style>

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

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{}中的

转自：http://blog.sina.com.cn/s/blog_67923a080100ibj7.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航