浏览器css隐藏滚动条的方法!除了IE一般都支持

::-webkit-scrollbar { /* 滚动条整体部分 */
width:0px;
margin-right:2px
}
::-webkit-scrollbar-track-piece { /*内层轨道,滚动条中间部分 */
background-color: white;
}

::-webkit-scrollbar:horizontal {
height:0px;
margin-bottom:2px
}

::-webkit-scrollbar-track-piece { /*内层轨道,滚动条中间部分 */
background-color: white;
}
::-webkit-scrollbar-thumb { /* 滑块 */
width:0px;
background: #CBCBCB;
}

::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
background: #909090;
}

这里是隐藏的,如果要有点一显示,把width加一点宽度就行了

原文地址:https://www.cnblogs.com/firebirdweb/p/10035698.html

时间: 2024-08-29 08:56:23

浏览器css隐藏滚动条的方法!除了IE一般都支持的相关文章

CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找了一下CSS隐藏文字的方法,有以下几条: 1.display:none; 这个大家普遍说法是,搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,不为隐藏的对象保留物理占位空间.GG也搜CSS文件?不过如果用这个方法,<h1>如何设计,也是难题. 2.visibility:hidden; 和disp

css隐藏滚动条

xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有3种解决方案,方法1: 代码如下: html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条优点:完全解决了这个问题, 允许你保持完整的XHTML doctype.缺点:即使页面不需要垂直滚

css隐藏滚动条方法

1.完全隐藏 在<boby>里加入scroll="no",可隐藏滚动条:<boby scroll="no"> 2.在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条:反之,则显示:<boby scroll="auto"> 3.样式表方法 在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条:加入style="ov

CSS中隐藏滚动条的方法

xhtml中隐藏滚动条 在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个 bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷. 对于这个bug一般有3种解决方案, 方法1: 代码: 程序代码 html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条 优点:完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点:即

div css隐藏内容样式方法

一.使用css隐藏方法用到CSS样式单词及对应解释 1.使用display:none;来隐藏所有信息(无空白位占据)推荐,CSS display手册查看2.使用overflow:hidden;来隐藏溢出的文字或图片 适用推荐,css overflow手册查看3.使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否,css overflow-y手册查看,css手册查看overflow-x 1.css隐藏DIV及内容,完全隐藏内容与布局 解释:使用CSS单

css隐藏元素的方法何区别

前言 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.下面我的这篇文章就给大家解说一下他们之间的区别吧,让大家能根据场合来选择适合的方式. Opacity 该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消

CSS隐藏页面元素方法

一.css隐藏页面盒子 overflow:hidden;   隐藏盒子超出的部分,溢出隐藏 position:absolute; /left/top...-999px;  将位置设到不可见区域,隐藏盒子,而且占位置. opacity:0;  隐藏盒子   隐藏之后还占据原来的位置. visibility:hidden;   隐藏盒子    隐藏之后还占据原来的位置. display:none;        隐藏盒子    隐藏之后不占据原来的位置. display:block;       元

css 隐藏滚动条

/* component: node-list */ .node-list { width: 12.5%; max-height: 100%; /* 隐藏滚动条 */ overflow-x: hidden; /* background-color: tomato; */ } .node-list::-webkit-scrollbar { display: none; } 原文地址:https://www.cnblogs.com/aisowe/p/11441937.html

css隐藏滚动条(webkit和非webkit)

1.移动端或者谷歌浏览器(webkit内核) ::-webkit-scrollbar { display: none; } 2.兼容所有浏览器的css写法 demo: html部分: <div class="outsideBox"> <div class="centerBox"> <div class="insideBox"></div> </div> </div> CSS部