引言
如果你是要找滚动条的隐藏问题，这一篇绝对是最全，最完美的！
之前写过一篇文章，用css样式的方式来解决滚动条一直显示的问题。
但那种方式其实是存在一种兼容性上的问题的。
比如昨天我的产品经理给到我一个反馈，说苹果手机上出现了滚动条，而安卓手机上没有。
我都懵逼了，，果然是高贵的苹果手机
刚好，今天从一个大佬那边听到了一种方法，能够很好的完全的解决掉滚动条的隐藏问题。
实现与讲解
这个的核心实现其实就是溢出隐藏的方式，把滚动条隐藏掉。
比如我这个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>溢出隐藏示例</title>
</head>
<body>
<div class="navBox">
<div class="navItem">导航条1</div>
<div class="navItem">导航条2</div>
<div class="navItem">导航条3</div>
<div class="navItem">导航条4</div>
<div class="navItem">导航条5</div>
<div class="navItem">导航条6</div>
<div class="navItem">导航条7</div>
<div class="navItem">导航条8</div>
<div class="navItem">导航条10</div>
</div>
<style type="text/css">
* {padding: 0;margin: 0;}
.navBox {display: flex;gap: 10px;white-space: nowrap;overflow: auto;}
</style>
</body>
</html>这里是必然有滚动条的！
在需要做横向滚动或纵向滚动的盒子处，正常使用横向或纵向滚动的样式，即overflow
但是要注意这个内部滚动的盒子一定要比他原先的方式要大：
比如说它这里是一行的文本做横向滚动，实际高度30px，那你就要设它的高度为60px（只要比之前大就行）
然后在它外层套一个盒子，这个盒子的高度就要设置成内部盒子的实际高度，比如说设成30px，可以略大一点也没啥
那么这个时候内部的内容其实是溢出的，但是它的实际内部内容默认是垂直居上的话就完全显示出来
仅是滚动条溢出，那么我们在父盒子当中使用overflow: hidden把它隐藏掉。
/* 子盒子正常做滚动，但高度需要变大 */
.navBox {display: flex;gap: 10px;white-space: nowrap;overflow: auto;height: 100px;}
/* 父盒子高度需要与原本子盒子的高度一致，然后溢出裁剪掉 */
.newNavBox {height: 25px; overflow: hidden; }搞定，就跟上图一样了，可以正常滚动，且没有滚动条
全套代码
下面附上全套代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>溢出隐藏示例</title>
</head>
<body>
<div class="newNavBox">
<div class="navBox">
<div class="navItem">导航条1</div>
<div class="navItem">导航条2</div>
<div class="navItem">导航条3</div>
<div class="navItem">导航条4</div>
<div class="navItem">导航条5</div>
<div class="navItem">导航条6</div>
<div class="navItem">导航条7</div>
<div class="navItem">导航条8</div>
<div class="navItem">导航条10</div>
</div>
</div>
<style type="text/css">
* {padding: 0;margin: 0;}
/* 子盒子正常做滚动，但高度需要变大 */
.navBox {display: flex;gap: 10px;white-space: nowrap;overflow: auto;height: 100px;}
/* 父盒子高度需要与原本子盒子的高度一致，然后溢出裁剪掉 */
.newNavBox {height: 25px; overflow: hidden; }
</style>
</body>
</html>
