html滚动条隐藏却有滚动效果

作者：狂刀血斧发布日期:2025-02-08 浏览:45

/* 隐藏滚动条但保留滚动效果的CSS代码 */
/* 适用于Chrome, Safari和Opera */
::-webkit-scrollbar {
    display: none;
}

/* 适用于IE和Edge */
body {
    -ms-overflow-style: none; /* IE 和 Edge */
}

/* 适用于Firefox */
body {
    scrollbar-width: none; /* Firefox */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏滚动条但有滚动效果</title>
    <style>
        /* 隐藏滚动条但保留滚动效果的CSS代码 */
        /* 适用于Chrome, Safari和Opera */
        ::-webkit-scrollbar {
            display: none;
        }

        /* 适用于IE和Edge */
        body {
            -ms-overflow-style: none; /* IE 和 Edge */
        }

        /* 适用于Firefox */
        body {
            scrollbar-width: none; /* Firefox */
        }

        /* 示例内容样式 */
        .content {
            height: 200vh; /* 让页面高度超过视口高度，以产生滚动效果 */
            background: linear-gradient(to bottom, #ff7e5f, #feb47b);
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>隐藏滚动条但有滚动效果</h1>
        <p>滚动页面，你会看到滚动效果，但没有滚动条。</p>
    </div>
</body>
</html>

解释说明：

CSS部分:
- ::-webkit-scrollbar { display: none; }：这是针对Webkit内核浏览器（如Chrome、Safari和Opera）的样式规则，用于隐藏滚动条。
- -ms-overflow-style: none;：这是针对IE和Edge浏览器的样式规则，用于隐藏滚动条。
- scrollbar-width: none;：这是针对Firefox浏览器的样式规则，用于隐藏滚动条。
HTML部分:
- 创建了一个简单的页面结构，包含一个高度超过视口高度的内容区域（.content），以确保页面可以滚动。
- 使用了线性渐变背景来增强视觉效果。

通过这些代码，页面将隐藏滚动条，但仍能正常滚动。

上一篇：html在线转义

下一篇：html中margin的用法