项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容。

如下图所示:

在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批。

先上谷歌浏览器解决滚动条代码:

CSS代码:

<style>
     .tp_box1{
     width: 517px;
     height: 400px;
 /* auto在那个方向有益处 就在那个方向上有滚动条 */
 overflow: auto;
     }
  .tp_box1::-webkit-scrollbar{
      display: none;
  }
     .tp_box2{
     width: 100%;
     height: 500px;
     background: pink;
     }
     .tp_box3{
     width: 100%;
     height: 500px;
     background: red;
     }
     .tp_box4{
     width: 100%;
     height: 500px;
     background: black;
     }
</style>
HTML代码:
<div class="tp_box1">
  <div class="tp_box2"></div>
  <div class="tp_box3"></div>
  <div class="tp_box4"></div>
</div>
上述代码完美解决图一问题,但是此方法不兼容火狐,怎么办呢? 看如下代码:
CSS代码:
<style>
     .tp_box{
     width: 500px;
     height: 400px;
     overflow: hidden;
     }
.tp_box1{
     width: 517px;
     height: 400px;
     overflow-x: hidden;
       overflow-y: scroll;
     }
     .tp_box2{
     width: 100%;
     height: 500px;
     background: pink;
     }
     .tp_box3{
     width: 100%;
     height: 500px;
     background: red;
     }
     .tp_box4{
     width: 100%;
     height: 500px;
     background: black;
     }
 
</style>
HTML代码:
<div class="tp_box">
  <div class="tp_box1">
    <div class="tp_box2"></div>
    <div class="tp_box3"></div>
    <div class="tp_box4"></div>
  </div>
</div>
OK兼容都解决了!
 一般滚动条默认宽度为17px,我们只需在有滚动条的盒子外面在套一个大盒子,子盒子比大盒子宽度多出17像素即可(这17px刚好存放滚动条位置),比如大盒子设置100px,子盒子设置117px,再给大盒子加上overflow:hidden; 让超出部分隐藏,那么就达到所谓的隐藏滚动条效果,其实滚动条并没有隐藏,只是被遮挡了看不见了而已,方法很实用。

如何让css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器的更多相关文章

  1. css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器

    项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...

  2. 实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

  3. 3种方法实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...

  4. css 隐藏滚动条

    如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...

  5. css隐藏滚动条

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  6. 如何使用CSS隐藏滚动条并且兼容大部分浏览器

    隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari. 如下demo: Content 1 Content 1 Content 1 Conte ...

  7. css 之内容溢出滚动,隐藏滚动条(解决火狐浏览隐藏不了滚动条问题)

    解决火狐浏览隐藏不了滚动条问题 1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer { width:350px; height:300px; overf ...

  8. 浏览器css隐藏滚动条的方法!除了IE一般都支持

    ::-webkit-scrollbar { /* 滚动条整体部分 */ width:0px; margin-right:2px}::-webkit-scrollbar-track-piece { /* ...

  9. css隐藏滚动条依旧可以滚动

    在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...

随机推荐

  1. REST framework 之 分页

    DRF分页组件 为什么要使用分页 我们数据表中可能会有成千上万条数据,当我们访问某张表的所有数据时,我们不太可能需要一次把所有的数据都展示出来,因为数据量很大,对服务端的内存压力比较大还有就是网络传输 ...

  2. 2017年广东省ACM省赛(GDCPC-2017)总结

    今年第一次参加省赛(也是第一次参加这类比赛),既有点惊喜又有点紧张,前一晚没有怎么睡好,有点怕今年打铁,虽然说大一打铁也说的过去,可是谁也不想打铁. 一开始比赛的时候我一开始没有去看题,而是把我们队的 ...

  3. 【机器学习速成宝典】模型篇06决策树【ID3、C4.5、CART】(Python版)

    目录 什么是决策树(Decision Tree) 特征选择 使用ID3算法生成决策树 使用C4.5算法生成决策树 使用CART算法生成决策树 预剪枝和后剪枝 应用:遇到连续与缺失值怎么办? 多变量决策 ...

  4. CentOS 6.5系统使用yum方式安装LAMP环境和phpMyAdmin,mysql8.0.1/mysql5.7.22+centos7,windows mysql安装、配置

    介绍如何在CentOs6.2下面使用YUM配置安装LAMP环境,一些兄弟也很喜欢使用编译的安装方法,个人觉得如果不是对服务器做定制,用yum安装稳定简单,何必去download&make&am ...

  5. Go Int转string几种方式性能测试

    Go Int转string几种方式性能测试 - 贤冰的博客 - CSDN博客 https://blog.csdn.net/flyfreelyit/article/details/79701577

  6. QT Desinger设计窗体应用程序框架

    目录 目录 前言 系统软件 QT Designer Using QT Designer Open QTDesigner Tool Widget Box QT Designer的布局 属性栏 示例 i ...

  7. excel 导入导出测试点

    目前,为方便操作,很多系统都会增加批量导入导出的功能.文件导入导出一般格式都是excel.由于用户直接在excel在填写内容,无法控制填写的格 式,加上excel解析比较困难,所以一般涉及到excel ...

  8. 【MM系列】SAP MM模块-配置PO的创建时间

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-配置PO的创建时间 ...

  9. 【ABAP系列】SAP ABAP控制单元格是否可编辑

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP控制单元格是否可 ...

  10. idea中dbug模式的使用

    1:进入断点状态时候每个按钮的用途如图: 2:当运行过得代码需要查看输出内容时候,可以选中需要查看的代码进行运行如图:会在控制台输出选中代码执行的结果