如何让滚动消失也可滚动

隐藏滚动条但保持滚动功能

在CSS中，你可以隐藏滚动条但依然保留滚动功能。以下是几种实现方法：

方法1：使用WebKit浏览器的伪元素（适用于Chrome、Safari等）

.container {
    overflow: auto;
    -ms-overflow-style: none; /* IE和Edge */
    scrollbar-width: none; /* Firefox */
}

.container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

方法2：使用负边距和外边距（跨浏览器方案）

.container {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.container-inner {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    margin-right: -20px;
    margin-bottom: -20px;
}

方法3：使用padding覆盖滚动条(不成功)

.container {
    overflow: auto;
    padding-right: 20px; /* 滚动条宽度 */
}

.container-content {
    margin-right: -20px; /* 抵消padding */
}

方法4：纯CSS解决方案（适用于现代浏览器）

.container {
    overflow: hidden;
}

.container:hover {
    overflow: auto;
}

注意事项

1. 不同浏览器的滚动条宽度可能不同（通常15-20px）
2. 移动设备通常会自动隐藏滚动条，只在滚动时显示
3. 隐藏滚动条可能会影响用户体验，谨慎使用

选择哪种方法取决于你的具体需求和目标浏览器支持范围。方法1是最简洁的现代解决方案，但需要针对不同浏览器添加前缀。