如何隱藏scroll-Y縱向滾動條，並不影響內容滾動的方法

網上搜了不少關於隱藏滾動條的文章，發現不少都是隻說了如何隱藏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>