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 之内容溢出滚动,隐藏滚动条的主要内容,如果未能解决你的问题,请参考以下文章

如何用css控制浏览器滚动条

html js 或者css怎么做到隐藏滚动条,但是依旧可以滚动?

CSS学习(十八)-滚动条拖动元素轮廓线

CSS溢出-x:可见;和溢出-y:隐藏;导致滚动条问题

css 怎么设置内容滚动,滚动条隐藏

使用溢出时无法隐藏滚动条:自动