怎么在百度打广告_梧州市地图疫情最新消息_我想做网络推广_手机网站建设价格

CSS 实现滚动条的隐藏但保留滚动功能

有几种方法可以在网页中隐藏滚动条但保留滚动功能，以下是常见的实现方式，使用 CSS：

1. 使用 ::-webkit-scrollbar（适用于 Webkit 内核浏览器，如 Chrome、Safari）

/* 隐藏滚动条但保留滚动功能 */
body {/* 针对 Webkit 浏览器 */::-webkit-scrollbar {display: none;}/* 确保内容可滚动 */overflow-y: scroll;
}

2. 跨浏览器兼容方案（推荐）

body {/* 隐藏滚动条 */scrollbar-width: none; /* Firefox */-ms-overflow-style: none; /* IE 和 Edge */
}/* Webkit 浏览器 */
body::-webkit-scrollbar {display: none;
}/* 确保内容可滚动 */
body {overflow-y: scroll;
}

3. 使用父容器包裹内容

/* HTML 结构示例：
<div class="wrapper"><div class="content">内容...</div>
</div>
*/.wrapper {height: 100vh; /* 视口高度 */overflow: hidden; /* 隐藏外部滚动条 */
}.content {height: 100%;overflow-y: scroll; /* 内部滚动 */scrollbar-width: none; /* Firefox */-ms-overflow-style: none; /* IE 和 Edge */
}.content::-webkit-scrollbar {display: none; /* Webkit 浏览器 */
}

注意事项：

• scrollbar-width 和 -ms-overflow-style 是更现代的跨浏览器解决方案。
• 如果只需要隐藏垂直滚动条，使用 overflow-y，如果是水平滚动条，使用 overflow-x。
• 测试时确保内容高度或宽度超出容器，以验证滚动效果。