如何使用CSS将页面滚动条隐藏却不影响滚动效果

最新推荐文章于 2024-11-20 09:31:30 发布

屋檐吧

最新推荐文章于 2024-11-20 09:31:30 发布

阅读量2.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Java

本文链接：https://blog.youkuaiyun.com/weixin_43554218/article/details/89396915

Java 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种在网页设计中隐藏滚动条的方法，通过CSS代码实现滚动条的隐藏，同时保持滚动功能正常，适用于追求简洁美观页面效果的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在日常开发中，小伙伴们经常会遇到这种情况，当页面显示的内容超出页面大小的时候回出现滚动条，如下：
在这里插入图片描述

有时候为了美观或者简化页面效果，我们需要将滚动条隐藏，但又不影响滚动效果该怎么做，
.cont::-webkit-scrollbar {
display: none;
}
代码显示

<head>
    <meta charset="UTF-8">
    <title>去除滚动条</title>
    <style>
        .cont {
            width: 200px;
            height: 200px;
            border: 1px solid #000000;
            overflow-x: hidden;
        }
        
        .cont::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>
    <div class="cont">
        <p>周杰伦</p>
        <p>周杰伦</p>
        <p>周杰伦</p>
        <p>周杰伦</p>
        <p>周杰伦</p>
        <p>周杰伦</p>
        <p>周杰伦</p>
        <p>周杰伦</p>
        <p>周杰伦</p>
        <p>周杰伦</p>
    </div>
</body>