java中去掉纵滚动条_如何隐藏scroll-Y纵向滚动条，并不影响内容滚动的方法

网上搜了很多关于隐藏滚动条的文章，发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说。本文章将介绍3种隐藏滚动条的方法，大家可以结合实际情况，参考文章内容。

纯DIV+CSS方法

在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。该方法兼容所有浏览器。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

.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;

}

• 菜单1
• 菜单2
• 菜单3
• 菜单4
• 菜单5
• 菜单6
• 菜单7

function toggle1() {

document.getElementById('asider').style.overflowY='scroll';

}

function toggle2() {

document.getElementById('asider').style.overflowY='hidden';

}