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>

原文地址：https://www.cnblogs.com/corgisyj/p/11412168.html

时间： 2024-10-07 08:57:45

css 之内容溢出滚动，隐藏滚动条的相关文章

css 内容溢出显示垂直滚动条，内容不超出就不显示滚动条

<div class="div1"> 前端开发者前端开发者前端开发者前端开发者前端开发者 </div> css代码: .div1{ width:200px; height:100px; overflow-y:auto; }

想隐藏掉难看的滚动条,四处翻看博客,思路来源https://www.cnblogs.com/chefweb/p/6473517.html,不知道有没有更好的思路,先凑合着用吧. html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet&qu

CSS应用内容补充

一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ /*善用after和defore*/ content: "111"; /*注意加引号*/ clear: both; dis

CSS 实现隐藏滚动条同时又可以滚动

移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性.由于只需要兼容移动浏览器(Chrome 和 Safari),于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar. 关于这个选择器的介绍可以参考:Styling ScrollbarsCustom Scrollbars in WebKit 应用如下 CSS 可以隐藏滚动条: .element::-webki

css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以参考下,很有用的 1 div { 2 scrollbar-face-color: #fcfcfc; 3 scrollbar-highlight-color: #6c6c90; 4 scrollbar-shadow-color: #fcfcfc; 5 scrollbar-3dlight-color:

CSS中隐藏滚动条的简单实现方法

xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个 bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷. 对于这个bug一般有3种解决方案, 方法1: 代码: 程序代码 html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条优点:完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点:即

CSS中隐藏滚动条的方法

css隐藏滚动条

xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有3种解决方案,方法1: 代码如下: html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条优点:完全解决了这个问题, 允许你保持完整的XHTML doctype.缺点:即使页面不需要垂直滚

egret：设置滚动视图、隐藏滚动条以及层级的问题

一.设置滚动视图二.隐藏滚动条三.层级问题我将图中list列表内容添加到界面后,我发现右上角的关闭按钮失灵了, 第一反应是将这个按钮的层级设置到最高层, 但是我直接设置后,发现还是有问题. 最后找到原因,因为我将背景(包括关闭按钮)打了组, 将这个组给解组之后在去设置该关闭按钮的层级后: 此时再去点击关闭按钮,就能正常关闭了. 原文地址:https://www.cnblogs.com/WentingC/p/8675492.html