css 隐藏滚动条

作者：颓废的爱情发布日期:2025-06-18 浏览:16

/* 隐藏滚动条的 CSS 代码 */

/* 方法一：适用于 WebKit 浏览器（如 Chrome、Safari） */
::-webkit-scrollbar {
    display: none;
}

/* 方法二：适用于所有浏览器，但会隐藏整个元素的溢出部分 */
html {
    overflow: hidden;
}

/* 方法三：只隐藏 body 的滚动条，但仍然可以滚动 */
body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
}

/* 解释说明：
1. 方法一使用了 WebKit 浏览器的自定义滚动条样式属性 `::-webkit-scrollbar`，将其设置为 `display: none` 可以隐藏滚动条。
2. 方法二通过设置 `overflow: hidden` 来隐藏整个页面的滚动条，但这也会阻止页面的滚动功能。
3. 方法三使用了 `scrollbar-width` 和 `-ms-overflow-style` 属性来分别针对 Firefox 和 IE/Edge 浏览器隐藏滚动条，同时保留滚动功能。 */

上一篇：css overflow

下一篇：css 垂直居中