解決火狐瀏覽隱藏不了滾動條問題
1.里層容器的width多17px,外層容器溢出隱藏,能兼容各個瀏覽器
.outContainer { width:350px; height:300px; overflow: hidden; } .inContainer { height:300px; width: 367px; overflow-x:hidden; overflow-y:scroll; }
2.設置 scrollbar-width: none,可兼容
.outContainer { width:350px; height:300px; overflow: hidden; } .inContainer { height:300px; width: 350px; overflow-x:hidden; overflow-y:scroll; scrollbar-width: none; } /* 使用偽類選擇器 ::-webkit-scrollbar ,兼容chrome和safari瀏覽器 */ .inContainer::-webkit-scrollbar{ display: none; } /*兼容火狐*/ .inContainer { scrollbar-width: none; } /* 兼容IE10+ */ .inContainer { -ms-overflow-style: none; }
html如下
<body> <div class="outContainer" > <div class="inContainer"> <div class="inContent" ></div> <div class="inContent inContent2"></div> <div class="inContent" ></div> </div> </div> </body>