小白第一次發文記錄自己遇到的問題。 關於隱藏移動端滾動條方法很多，這裡只說本人用到的。 在PC端隱藏html右側預設滾動條 火狐和ie/Edge的樣式會使頁面內所有滾動條隱藏。Chrome只會隱藏右側預設滾動條，想要隱藏某個標簽內滾動條要單獨給予樣式::-webkit-scrollbar{width ...
小白第一次發文記錄自己遇到的問題。
關於隱藏移動端滾動條方法很多，這裡只說本人用到的。
在PC端隱藏html右側預設滾動條
html {
/*隱藏滾動條，當IE下溢出，仍然可以滾動*/
-ms-overflow-style:none;
/*火狐下隱藏滾動條*/
scrollbar-width: none;
}
/*Chrome下隱藏滾動條，溢出可以透明滾動*/
html::-webkit-scrollbar{width:0px}
火狐和ie/Edge的樣式會使頁面內所有滾動條隱藏。Chrome只會隱藏右側預設滾動條，想要隱藏某個標簽內滾動條要單獨給予樣式::-webkit-scrollbar{width:0px}。
移動端隱藏滾動條
上面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方法可以完全隱藏，用火狐樣式可以隱藏右側滑塊，但無法隱藏瀏覽器上下箭頭滑塊。
關於滾動條的問題也能通過一些插件解決。本人還未用過，暫時不提，可以查看別人的文章。
