小白第一次發文記錄自己遇到的問題，
關于隱藏移動端滾動條方法很多，這里只說本人用到的，
在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方法可以完全隱藏，用火狐樣式可以隱藏右側滑塊，但無法隱藏瀏覽器上下箭頭滑塊，
關于滾動條的問題也能通過一些插件解決，本人還未用過，暫時不提，可以查看別人的文章，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/178586.html
標籤：JavaScript