怎樣隱藏滾動條還能滾動頁面（包括滑鼠滾輪）？

01-04

謝謝邀請

----------------------------------------

在webkit內核的瀏覽器里可以定義滾動條樣式。

在CSS初始處定義

::-webkit-scrollbar{

display:none;

}

----------------------------------------

在其他瀏覽器里可以設置父容器寬度為100%，子容器寬度為100%+18px

這樣滾動條處於視窗可視範圍外，算是個投機取巧的辦法。

之前做過，大概原理是用一個無滾動條的div包裹另一個有滾動條的div。從而實現隱藏滾動條的效果。

文章：純css，div隱藏滾動條，保留滑鼠滾動效果。

示例地址：http://runningls.com/demos/2016/css/scroll.html

親測有效的完整demo

::-webkit-scrollbar {display:none}

11111&

補充一個無需設定外層元素寬/高度的方法：利用負值margin

隱藏滾動條 - CODEPEN

::-webkit-scrollbar {

width: 0px;

height: 1px;

}

::-webkit-scrollbar-thumb {

border-radius: 5px;

-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

background: rgba(0, 0, 0, 0.2);

}

try this to hide html scroll bar.

html {
-ms-overflow-style:none;
overflow:-moz-scrollbars-none;
}
html::-webkit-scrollbar{width:0px}

為什麼使用scrolltop安卓手機上會出現兩個滾動條啊

原理與樓上相同，不過增加了一點複雜度，可以不用寫死寬度，並且同時隱藏橫向與豎向滾動條。

隱藏滾動條