关于ie，火狐，谷歌浏览器滚动条的隐藏以及自定义样式

最近做了一个项目，要求各个浏览器统一滚动条的样式，不显示滚动条，但是不影响鼠标的滑动事件。

查了很多资料，ie和谷歌都是可以自定义滚动条样式的，但是ie只能改变颜色，并不能修改宽度，圆角之类的。谷歌就比较随和了，可以自定义样式。

谷歌自定义滚动条样式代码：

/*----- 滚动条 -------*/::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.2);  }::-webkit-scrollbar {  width: 0px;height:8px;  background-color: #F5F5F5;border-radius: 5px;  }::-webkit-scrollbar-thumb { /* */background: #0C4EA2;border-radius: 5px; }::-webkit-scrollbar-corner{ background-color: #F5F5F5;}

ie隐藏滚动条样式代码： html {        /*隐藏滚动条，当IE下溢出，仍然可以滚动*/        -ms-overflow-style:none;        /*火狐下隐藏滚动条*/        overflow:-moz-scrollbars-none;    }    /*Chrome下隐藏滚动条，溢出可以透明滚动*/    html::-webkit-scrollbar{width:0px}

既然，火狐不允许自定义滚动条样式，然后又长的那么丑，那还不如就隐藏了把，对于上面的代码，是隐藏不了火狐的滚动条的，经查资料，看到一个比较投机的方法（当然也适用于其他浏览器），方法如下：

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。

尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。

这里介绍一个简单的方法。大体思路是在div外面再套一个div。这个div设置overflow:hidden。

而内容div设置 overflow-y: scroll;overflow-x: hidden;

然后再设置外层div的width小于内层div的width。

这个内层div其实是会出现滚动条的，所以不影响鼠标的滚动效果，而且我们看不到滚动条了。

内层div效果：

套上外层div效果后：

代码：

<div class= "nav_wrap">
<ul class= "nav_ul">
<li class="nav_li">我是菜单1</li>
<li class="nav_li">我是菜单2</li>
</ul>
</div>

.nav_wrap{  height: 400px;  width: 200px;  overflow: hidden;  border: 1px solid #ccc;  margin: 20px auto;
}
.nav_ul{  height: 100%;  width: 220px;  overflow-y: auto;  overflow-x: hidden;
}
.nav_li{  border: 1px solid #ccc;  margin: -1px;  height: 40px;  line-height: 40px;  text-align: center;  font-size: 12px;  width: 200px;
}
.btn_wrap{  text-align: center;
}

看到网上资料说，针对火狐浏览器，还可以使用插件来解决。

转载于:https://www.cnblogs.com/liuyanxia/p/8675752.html

关于ie，火狐，谷歌浏览器滚动条的隐藏以及自定义样式相关推荐

修改火狐浏览器滚动条样式
一.安装jquery和niceScroll ① npm install jquery ②在vue.config.js中添加如下代码 (如报ReferenceError: webpack is not ...
浏览器滚动条的隐藏和显示
兼容谷歌和火狐,Edge 本人的理解: 滚动条的隐藏和消失: 1.首先用个状态来保存是否开始滚动的状态,初始化状态为true 2.当滚轮滚动的时候,把是否滚动状态置为false,添加一个定时器setT ...
火狐浏览器滚动条样式
谷歌的滚动条样式很容易就百度出来了,火狐的滚动条困扰了我好久,终于解决了,不过有版本限制(火狐64以上): * {scrollbar-width: thin; // 宽度:auto(默认),thin( ...
html自动移动滚动条,css隐藏移动端滚动条并平滑滚动
HTML代码如下移动端隐藏滚动条解决方案 *{ padding:0; margin:0; } .par-type{ height:50px; -webkit-box-sizing:border-bo ...
Chrome谷歌浏览器76地址栏隐藏的HTTPS和WWW标记如何恢复
Chrome谷歌浏览器76地址栏隐藏的HTTPS和WWW标记如何恢复几天前正式推出的谷歌Chrome 76版本带来了许多新的特性和改进,但是也有一些相当有争议的变化.谷歌决定默认隐藏浏览器地址栏中的 ...
横向滚动条并且隐藏竖向滚动条
怎么用CSS给html加横向滚动条并且隐藏竖向滚动条解决方法:隐藏竖向滚动条在子页面的<html>标签里加入以下格式:<html style="overflow: au ...
CSS -- 实现DIV层背景颜色渐变（兼容IE 火狐谷歌浏览器）
CSS -- 实现DIV层背景颜色渐变 (兼容IE 火狐谷歌浏览器) FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType= ...
解决IE浏览器滚动条被隐藏问题
解决IE浏览器滚动条被隐藏问题(css) -ms-overflow-style: scrollbar;
怎麽把＂滚动条＂隐藏？
问题釐清什麽是＂滚动条＂? 滚动条指的是下图右侧被红线框起来的部分: 只要网页内容大于视窗,滚动条就会出现. 一般来说,只要不是body层次的滚动条,那用overflow: hidden;就能解决滚 ...

关于ie，火狐，谷歌浏览器滚动条的隐藏以及自定义样式

关于ie，火狐，谷歌浏览器滚动条的隐藏以及自定义样式相关推荐

最新文章

热门文章