CSS怎么隐藏滚动条
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS怎么隐藏滚动条相关的知识，希望对你有一定的参考价值。
有三种代码输入的方式可以在CSS隐藏滚动条。详细方法如下：
方法一:
代码如下:
html
overflow-y:
scroll;
原理：强制显示ie的垂直滚动条，而忽略水平滚动条；
优点：完全解决了这个问题,
允许你保持完整的XHTML
doctype.；
缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条；
方法二:(推荐采用)
代码如下:
html
overflow-x:
hidden;
overflow-y:
auto;
原理：隐藏横向滚动，垂直滚动根据内容自适应；
优点：在视觉上解决了这个问题.在不必要的时候,
未强制垂直滚动条出现；
缺点：只是隐藏了水平滚动条，如果页面真正需要水平滚动条的时候，屏幕以外的内容会因为用户无法水平滚动，而看不到；
方法三:
代码如下:
body
margin-right:
-15px;
margin-bottom:
-15px;
原理：这会在margin的水平和垂直方向上添加一个负值,
IE添加了该精确数值后,
便会去除对滚动条的需求假象；
优点：在视觉上解决了这个问题，垂直滚动根据内容自适应；
缺点：由于"人为创建"了15px的外边距(margin),
所以无法使用该填充过的屏幕区域。 参考技术A css3有一个直接调用的css，保证隐藏滚动条的同时还可以继续通过滚轮向下翻。
::-webkit-scrollbar
/*隐藏滚轮*/
display:
none;
但是仅限于支持css3的浏览器。如果是其他浏览器的话，可以麻烦点，先overflow:hidden;
然后再用写个滚轮向上滚或者向下滚的事件来模拟。望采纳。 参考技术B 隐藏竖向滚动条
在子页面的<html>标签里加入以下格式:<html
style="overflow:
auto;
overflow-y:hidden">,
style="overflow:auto"，当内容超出范围之后，就会自动有滚动条了。
设置div横向滚动条div
<style="overflow:scroll;"></div>
如何用css控制浏览器滚动条
参考技术A 用CSS控制滚动条样式1,Overflow内容溢出时的设置
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的值为visible、scroll、hidden、auto
visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。 auto 当内容超出范围时，显示滚动条，否则不显示。
应用:
没有水平滚动条:
<div style="overflow-x:hidden">test</div>
没有垂直滚动条 ：
<div style="overflow-y:hidden">test</div>
没有滚动条 ：
<div style="overflow-x:hidden;overflow-y:hidden" 或
style="overflow:hidden">test</div>
自动显示滚动条：
<div style="height:100px;width:100px;overflow:auto;">test</div>
2,自己定义滚动条的颜色
我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:/*这里放注释的代码*/
Body
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
以上2项适用与<body>、<div>、<textarea>、<iframe>
以上是关于CSS怎么隐藏滚动条的主要内容，如果未能解决你的问题，请参考以下文章