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

如下图所示:

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

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

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. javascript 链式调用+构造函数

    前几天面试,有一个问题是使用构造函数实现链式调用,后面查看了一些简单的资料,整理一下 首先,先说一下JS 中构造函数和普通函数的区别,主要分为以下几点 1.构造函数也是一个普通函数,创建方式和普通函数 ...

  2. mysql 安装教程(详细说明)

    如果你装过,一定要先卸载干净,并且重启重新装.卸载教程(保证成功)https://www.cnblogs.com/qzhc/p/11354678.html 大家都知道MySQL是一款中.小型关系型数据 ...

  3. How jQuery UI Works

    https://learn.jquery.com/jquery-ui/how-jquery-ui-works/ jQuery UI contains many widgets that maintai ...

  4. IntelliJ IDEA2018破解教程

    破解方法:下载破解补丁→修改配置文件→输入激活码→激活成功 由于JetBrains封杀,大部分激活服务器已经不能使用,使用下面的比较麻烦的方法也可以进行破解,但是有效期是到2100年(emmmm,也算 ...

  5. 服务器端-W3Chool:服务器脚本教程

    ylbtech-服务器端-W3Chool:服务器脚本教程 1.返回顶部 1. 服务器脚本教程 从左侧的菜单选择你需要的教程! SQL SQL 是用于访问和处理数据库的标准的计算机语言. 在本教程中,您 ...

  6. python - del 方法

    转自:http://blog.csdn.net/love1code/article/details/47276683 python中的del用法比较特殊,新手学习往往产生误解,弄清del的用法,可以帮 ...

  7. Linux_RHEV虚拟化_基础理论&KVM

    目录 目录 RHEV KVM Full 完全虚拟化 PV半虚拟化 Full和PV最大的区别 HVMHardware Virtual Manager硬件辅助虚拟化 Setup KVM Use the v ...

  8. 网易云课堂_C++程序设计入门(下)_第7单元:出入虽同趣,所向各有宜 – 文件输入和输出_第7单元 - 作业2:编程互评

    第7单元 - 作业2:编程互评 查看帮助 返回   提交作业(剩余10天) 完成并提交作业     作业批改 互评训练   互评作业   自评作业     成绩公布 查看成绩   由于在线编程不支持 ...

  9. 【不错】MySQL 事务隔离级别

    一.事务描述 1.事务的四个特性 ACID 1. A:原子性 = 一个事务或者都成功.或者都失败: 2. C:一致性 = 在整个事务的生命周期里面,查询到的数据是一致的: MVCC多版本并发控制:利用 ...

  10. JavaScript —— 实现简单计算器【带有 开/关机 清零 退格 功能】

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...