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

如下图所示:

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

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

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. 【CF1250G】Discarding Game(DP)

    题意:A和B玩游戏,一共n轮,A先B后,第i轮两人分别能得到a[i]和b[i]的得分,累加到当前得分和中 每一轮进行完之后A可以选择抵消得分,即两者都减去两者的min 若某个时刻某个人得分和不小于K则 ...

  2. JMS学习四(ActiveMQ消息过滤)

    一.消息的选择器 不管是在消息发送端设置消息过期时间还是在接收端设置等待时间,都是对不满足的消息有过滤的作用,那消息选择器就是为过滤消息而生的下面来看看消息选择器: ActiveMQ提供了一种机制,使 ...

  3. bootstrap editable 行内编辑

    除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件: <link href="../assets/css/bootstr ...

  4. Floating Point Math

    Floating Point Math Your language isn't broken, it's doing floating point math. Computers can only n ...

  5. ELK5+redhat7.4配置elasticsearch集群

    ELK介绍 ELK是三个开源软件的缩写,即elasticsearch.logstack.kibana. Elasticsearch:开源分布式搜索引擎,提供搜集.分析.存储数据三大功能.它的特点有:分 ...

  6. 挖矿病毒DDG的分析与清除

    注:以下所有操作均在CentOS 7.2 x86_64位系统下完成. 今天突然收到“阿里云”的告警短信: 尊敬的****:云盾云安全中心检测到您的服务器:*.*.*.*(app)出现了紧急安全事件:挖 ...

  7. springBoot+springSecurity 数据库动态管理用户、角色、权限(二)

    序: 本文使用springboot+mybatis+SpringSecurity 实现数据库动态的管理用户.角色.权限管理 本文细分角色和权限,并将用户.角色.权限和资源均采用数据库存储,并且自定义滤 ...

  8. leetcode-mid-dynamic programming-322. Coin Change - NO

    mycode 我开始错误的思路:先用大钱除总钱数来保证 fewest number of coins,当最后剩下的amount小于最小币值的货币时,就说明return -1,但是这样想是有问题的!!! ...

  9. JS - defer 和 async

    普通 <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,"立 ...

  10. spring boot加载自定义配置

    1.通过@Value 配置文件中 wechat: ssh: host: 192.0.1.1 port: 22 加载类 @Component @Data public class SftpConfig ...