CSS隐藏滚动条

MountGaoJiang

于 2018-12-10 17:31:53 发布

2894

本文链接：https://blog.csdn.net/weixin_42895400/article/details/84943479

版权

CSS隐藏滚动条

横向滑动/滚动隐藏滚动条

简介

移动端浏览器将页面的滚动条自动隐藏，同时又保证页面可以滚动，用户可以手动上下翻。

PC端浏览器不会将页面的滚动条自动隐藏，在出现横向滚动条时候有可能会覆盖内容，直接隐藏横向滚动条会导致无法横向滚动。

如何做到既隐藏滚动条，又可以横向滚动？

设想是不是可以隐藏了滚动条的大部分，留下一小部分，用来滚动查看内容。

下面一起来实现这个hack吧

示例

//html结构
<div class="demo-tab">
  <ul id="items">
    <li class="item"><div class="item-on"></div></li>
    <li calss="item"><div></div></li>
    <li class="item"><div></div></li>
    <li class="item"><div></div></li>
  </ul>
</div>

//css
<style>
.demo-tab{
  position:fixed;
  bottom:41px;
  overflow:hidden;/*主要*/
  width:100%;
  height:50px;/*主要*/
}
.demo-tab ul{
  width:100%;
  height:60px;/*主要*/
  font-size:0;
  background:#e8e8e8;
  overflow-x:scroll;/*主要*/
  overflow-y:hidden;/*主要*/
  white-space:nowrap;
}
.item{
  display:inline-block;
  width:33.3333333%;
  height:100%;
  padding:10px 0;
  font-size:18px;
  background:#9c9c9c;
}
.item-on{
  height:12px;
  background:#04be02;
}
</style>

原理：

外层的div的高度要比里层ul/div或者其它元素的高度小，然后overflow:hidden，这样就可以隐藏了滚动条的大部分，留下一小部分，用来滚动查看内容。

应用场景

顶部或者底部的Tab比较多，需要滚动显示

浏览器兼容性

特征	Chrome	Firefox	Safari	Edge	IE	Opera
基本支持	yes	yes	yes	yes	9+	yes

参考：

https://www.cnblogs.com/youlinwd/p/5540864.html

纵向滑动/滚动隐藏滚动条

简介

移动端浏览器将页面的滚动条自动隐藏，同时又保证页面可以滚动，用户可以手动上下翻。

PC端浏览器不会将页面的滚动条自动隐藏，在出现横向滚动条时候有可能会挤压页面内容，造成页面布局混乱。

如何做到既隐藏滚动条，又可以纵向滚动？

示例

//html结构
<div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>

//css
<style>
.outer-container,.content {
    width: 200px; height: 200px;
}
.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    position: absolute; left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

 /* for Chrome */
.inner-container::-webkit-scrollbar {
    display: none;
}
</style>