如何在不影响内容滚动的情况下隐藏scroll-Y垂直滚动条

时间：2023-03-31 12:20:32 CSS

在网上搜索了很多关于隐藏滚动条的文章，发现很多只讲到如何隐藏scroll-X水平滚动条，但是对于scroll-Y垂直滚动条没有明确说明。本文将介绍3种隐藏滚动条的方法，大家可以根据实际情况参考文章内容。纯DIV+CSS方式在容器overflow:hidden外再嵌套一层，然后限制内部内容的大小与外嵌套层一样，变相隐藏。此方法与所有浏览器兼容。

.outer-container{溢出：隐藏；宽度：200px；}.container{溢出-x：隐藏；溢出-y：滚动；宽度：220px；高度：100px；背景色：黄色；}CSS3自定义滚动条伪对象选择器css3有一个直接调用的css，在隐藏滚动条的同时保证滚动条可以向下滚动。::-webkit-scrollbar{/*隐藏滚动条*/display:none;}但只适用于支持css3的浏览器。为兼容其他PC浏览器（IE、Firefox等），请选择第一种方式。Nativejs操作DOM，使用鼠标事件调用document.getElementById("xxx").style.overflowY='scorll'，直接使用overflow-y='scorll'会报错，因为javascript把overflow和y之间的-as减法运算符，overflow被解释为样式属性，y成为变量；如何解决这个问题呢？DOM中使用骆驼标记法来解决这个问题，只需将overflow-y重写为overflowY即可。#asider{溢出：隐藏；宽度：200px；height:100px;

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

functiontoggle1(){document.getElementById('sider').style.overflowY='scroll';}functiontoggle2(){document.getElementById('asider').style.overflowY='hidden';