网上搜了很多关于隐藏滚动条的文章,发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说。本文章将介绍3种隐藏滚动条的方法,大家可以结合实际情况,参考文章内容。
纯DIV+CSS方法
在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。该方法兼容所有浏览器。
<div class="outer-container">
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
.outer-container{
overflow: hidden;
width: 200px;
}
.container{
overflow-x: hidden;
overflow-y: scroll;
width: 220px;
height: 100px;
background-color: yellow;
}
CSS3 自定义滚动条的伪对象选择器
css3有一个直接调用的css,保证隐藏滚动条的同时还可以继续通过滚轮向下翻。
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
但是仅限于支持css3的浏览器。如要兼容PC 其他浏览器(IE、Firefox 等),请选择第一种方法。
原生js操作DOM
用鼠标事件调用document.getElementById("xxx").style.overflowY = 'scorll',直接用overflow-y = 'scorll'会报错,因为javascript把overflow和y之间的- 当作了减运算符,overflow解释成style的属性,y成了一个变量;那怎样解决这个问题呢?DOM里采用了Camel记号来解决这个问题,把overflow-y改写成overflowY即可。
#asider{
overflow: hidden;
width: 200px;
height: 100px;
}
<div id="asider" onmouseover="toggle1()" onmouseout="toggle2()">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
<li>菜单6</li>
<li>菜单7</li>
</ul>
</div>
<script type="text/javascript">
function toggle1() {
document.getElementById('asider').style.overflowY='scroll';
}
function toggle2() {
document.getElementById('asider').style.overflowY='hidden';
}
</script>