css不显示滚动条但可以滚动

作者：黑白灰调发布日期:2025-07-30 浏览:7

/* 以下是一个实现“不显示滚动条但可以滚动”的CSS代码示例 */

/* 隐藏滚动条，同时保持滚动功能 */
::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}

/* 确保元素可以滚动 */
.container {
    overflow: auto; /* 启用滚动 */
    height: 300px; /* 设置固定高度 */
}

解释说明：

::-webkit-scrollbar { display: none; }：这是针对Webkit浏览器（如Chrome、Safari）的样式规则，用于隐藏滚动条。通过将display属性设置为none，滚动条将不可见。
.container { overflow: auto; height: 300px; }：这里的.container是需要隐藏滚动条并允许滚动的容器。overflow: auto;确保当内容超出容器的高度时，容器会启用滚动功能，而height: 300px;设置了容器的高度。

这样，用户仍然可以通过鼠标滚轮或触摸板进行滚动，但不会看到滚动条。

上一篇：css media

下一篇：css线性渐变