移動端隱藏滾動條，css方法

  小白第一次發文記錄自己遇到的問題。

  關於隱藏移動端滾動條方法很多，這里只說本人用到的。

  在PC端隱藏html右側默認滾動條

html {
        /*隱藏滾動條，當IE下溢出，仍然可以滾動*/
        -ms-overflow-style:none;
        /*火狐下隱藏滾動條*/
        scrollbar-width: none;
    }
  /*Chrome下隱藏滾動條，溢出可以透明滾動*/
html::-webkit-scrollbar{width:0px}

  ie/Edge的樣式會使頁面內所有滾動條隱藏。Chrome和火狐會隱藏右側默認滾動條，想要隱藏某個標簽內滾動條要單獨給予相應樣式。

 移動端隱藏滾動條

  上面ie與火狐樣式也可用於移動端。但Chrome(右側默認滾動條)就不可以了。

  這里我只說我用到的方式，Chrome移動端想要用::-webkit-scrollbar{width:0px}的樣式隱藏右側默認滾動條。需要設置html,body的width和height

 

html,body{ width: 100%; height: 100%; overflow: scroll;}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0px;height:0px;}
body{margin:0;}

這樣移動端右側默認滾動條就隱藏了。如果只是隱藏某個標簽內出現的滾動條單獨給予樣式::-webkit-scrollbar{width:0px}即可，不用設置上述樣式。

移動端將body{height:100%,width:100%}，也是有弊端的，這樣會導致document.body.scrollTop，window.pageYOffset的滾動條滾動距離獲取會失效。我會在之后發表一篇解決辦法。

只測試了3個手機瀏覽器，百度瀏覽器能用Chrome方法隱藏。火狐就用PC端那個方法。華為手機自帶瀏覽器，用Chrome方法可以完全隱藏，用火狐樣式可以隱藏右側滑塊，但無法隱藏瀏覽器上下箭頭滑塊。

關於滾動條的問題也能通過一些插件解決。本人還未用過，暫時不提，可以查看別人的文章。