引言

如果你是要找滚动条的隐藏问题,这一篇绝对是最全,最完美的!

之前写过一篇文章,用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>

欢迎关注拓行公众号,分享各种技术博客文章

拓行——奋勇进取,开拓未来,砥砺前行

最后修改:2025 年 05 月 23 日
如果您对各种技术博客文章感兴趣,欢迎关注拓行公众号,分享各种专业技术知识~