css 之内容溢出滚动,隐藏滚动条
Posted corgisyj
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 之内容溢出滚动,隐藏滚动条相关的知识,希望对你有一定的参考价值。
解决火狐浏览隐藏不了滚动条问题
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>
以上是关于css 之内容溢出滚动,隐藏滚动条的主要内容,如果未能解决你的问题,请参考以下文章