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

勿忘我發表於2019-02-16

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

相關文章