隐藏scroll-Y纵向滚动条而不影响内容滚动

本文为搬运学习,感谢原文大佬，原文地址:https://blog.csdn.net/weixin_34209851/article/details/88883109

纯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，保证隐藏滚动条的同时还可以继续通过滚轮向下翻。

#freeStyle {
            height: 200px;
            width: 500px;
            overflow: auto;
        }
 
#freeStyle::-webkit-scrollbar-track {
            background-color: #fff;
            /* -webkit-box-shadow: inset 0 0 6px #242d3e; */
        }
 
/*定义滚动条高宽及背景*/
#freeStyle::-webkit-scrollbar {
            width: 10px;
            background-color: #fff;
        }
 
/*定义滚动条*/
#freeStyle::-webkit-scrollbar-thumb {
            background-color: #9aa7ad;
            border-radius: 5px;
            height: 50px;
        }


<div id="freeStyle">
    亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP 
        亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP亚索要出AP     
</div>

但是仅限于支持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>