绝对解决滚动条隐藏问题！

黄炜

2025 年 06 月 01 日

72 次浏览

暂无评论

1935字数

技术 css

引言

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

之前写过一篇文章，用css样式的方式来解决滚动条一直显示的问题。

解决滚动条默认显示的问题

引言最近遇见了一个很离谱的问题，明明已经设置了横向滚动条隐藏，也就是scrollbar-width: none;但...

但那种方式其实是存在一种兼容性上的问题的。

比如昨天我的产品经理给到我一个反馈，说苹果手机上出现了滚动条，而安卓手机上没有。

我都懵逼了，，果然是高贵的苹果手机

刚好，今天从一个大佬那边听到了一种方法，能够很好的完全的解决掉滚动条的隐藏问题。

实现与讲解

这个的核心实现其实就是溢出隐藏的方式，把滚动条隐藏掉。

比如我这个示例：

<!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>

绝对解决滚动条隐藏问题！