网上搜了很多关于隐藏滚动条的文章，发现很多都是只说了如何隐藏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>
