2020-09-28

巧妙隐藏目录滑动条## 怎么隐藏掉滑动条,巧妙避开浏览器滑动条默认样式

问题描述:项目目录需要加上滑动条,但浏览器默认滑动条加上会很难看呀(如图),办法来了

方法一
给滑动条加样式

<style>
  .scrollbar::-webkit-scrollbar{   //-webkit代表chrome、safari私有属性；
                width: 1px;  //自定义滑动条宽度
                height: 1px;   //自定义滑动条高度
                background-color: #0099ff;  //自定义滑动条颜色
            }
//第二种详细点
::-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;}
</style>

补充:

1. -moz代表firefox浏览bai器私有属性；
2. -ms代表IE浏览器私有属性；
3. -webkit代表chrome、safari私有属性；
4. -o代表Opera私有属性。

看到这,是不是觉得其他浏览器只要换成对应属性就可以了呢?错觉O(∩_∩)O哈哈~

经本人花了n小时多次测验,发现根本不管用o(╥﹏╥)o--------如果有兄弟姐妹成功了,一定要评论告诉我呀~~~~
(可能是本人知识缺失,按理说应该没问题的,奇怪)
(＃￣～￣＃)

接下来,第二种方法奉上(推荐使用,不用考虑浏览器兼容问题哈哈)

方法二
步骤一:在目录外面加一个div标签,加上overflow:hidden;height;(必须设置，而且需要考虑到适应浏览器，用百分比);width;

步骤二:在目录上加overflow-y:scroll;height:100%;width;

注意:父级div宽度必须比目录所设div小,以此隐藏滑动条;
效果图如下:

附上源代码图:

看到这,是不是清晰很多啦!
吐槽:居然这么简单的东西困扰我很久,哭死o(╥﹏╥)oo(╥﹏╥)o…