隐藏式滚动条但有滚动效果

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

原创最新推荐文章于 2024-11-20 09:31:30 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

前端专栏收录该内容

29 篇文章

订阅专栏

这是一个使用CSS隐藏内部<div>元素滚动条的示例。通过设置`.inner`类的`overflow-x`为`hidden`和`::-webkit-scrollbar`为`display:none`，实现了在浏览器中不显示滚动条的效果。内容包含多个重复的`<p>`标签，每个标签内容为'王小'。

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .inner{
                width: 200px;
                height: 200px;
                border: 1px solid #000000;
                overflow-x: hidden;
            }
            
            .inner::-webkit-scrollbar {
                display: none;
            }
        </style>
    </head>
 
    <body>
        <div class="inner">
            <p>王小</p>
            <p>王小</p>
            <p>王小</p>
            <p>王小</p>
            <p>王小</p>
            <p>王小</p>
            <p>王小</p>
        </div>
    </body>
 
</html>