CSS - 实现容器溢出后隐藏滚动条并且能正常滚动，盒子高度超出后不显示滚动条但是能正常滚动（附带详细示例，完美解决方案）

最新推荐文章于 2024-04-01 17:22:27 发布

王佳斌

最新推荐文章于 2024-04-01 17:22:27 发布

阅读量4.7k

点赞数 3

分类专栏： + CSS 文章标签： css 去掉滚动条容器溢出后隐藏滚动条去掉滚动条还能正常滚动 css详细示例

本文链接：https://blog.csdn.net/weixin_44198965/article/details/130389602

版权

+ CSS 专栏收录该内容

62 篇文章 12 订阅

订阅专栏

前言

网上很多都会使用 JS 来实现，其实纯 CSS 就能完成。

本文实现了 当外层容器盒子溢出时，去掉滚动条的显示（但能正常滚动），适用于 Vue、React 等全部前端项目，

您可以直接复制示例源码，运行后查看效果。

如下图所示，默认会显示滚动条，但可以把它去掉，

另外不会影响到全局，仅是 “这块容器” 生效。

示例代码干净整洁，兼容全部浏览器

在这里插入图片描述

示例源码

推荐一键复制功能，避免漏选。

新建一个 *.html 文件，复制运行起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .content {
            /* 您的样式 */
            background: #999;
            width: 230px;
            height: 200px;
            /* 去掉滚动条 */
            overflow: auto;
            -ms-overflow-style: none;/* IE 10+ */
            overflow: -moz-scrollbars-none;/* Firefox */
        }
        /* 宽度设为0 */
        .content::-webkit-scrollbar { width: 0 !important }
    </style>
</head>
<body>
    <h1>现在的：</h1>
    <section class="content">
        <h1>我是内容</h1>
        <h1>我是内容</h1>
        <h1>我是内容</h1>
        <h1>我是内容</h1>
        <h1>我是内容</h1>
        <h1>我是内容</h1>
        <h1>我是内容</h1>
        <h1>我是内容</h1>
        <h1>我是内容</h1>
    </section>
</body>
</html>

王佳斌

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS - 实现容器溢出后隐藏滚动条并且能正常滚动，盒子高度超出后不显示滚动条但是能正常滚动（附带详细示例，完美解决方案）

css 怎么不显示滚动条还能滚动，CSS 实现隐藏滚动条同时又可以滚动，css如何隐藏垂直滚动条但同时需保持滚动，css-滚动但不显示滚动条的两种写法，CSS 实现隐藏滚动条同时又可以滚动，css滚动条(css不显示滚动条但可以滚动)，css设置去掉滚动条依然可以滚动，CSS 隐藏滚动条但可以滚动，CSS 实现隐藏滚动条同时又可以滚动的代码，css - 如何隐藏滚动条但又能滚动,不用js实现，css 隐藏滚动条,但仍然能滚动，css设置Overflow实现隐藏滚动条的同时又可以滚动，如何在不显示滚动条的
复制链接

扫一扫