引言
如果你是要找滚动条的隐藏问题,这一篇绝对是最全,最完美的!
之前写过一篇文章,用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>