vue隐藏滚动条但是仍然可以滚动

作者：花折亦无情发布日期:2025-10-09 浏览:73

/* 隐藏滚动条但仍然可以滚动的CSS代码 */
<style>
body::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 确保内容仍然可以滚动 */
body {
  -ms-overflow-style: none;  /* IE 和 Edge */
  scrollbar-width: none;  /* Firefox */
  overflow-y: scroll; /* 确保页面仍然可以滚动 */
}
</style>

解释说明：

隐藏滚动条：通过 ::-webkit-scrollbar 选择器，我们可以针对 WebKit 内核的浏览器（如 Chrome 和 Safari）隐藏滚动条。display: none; 直接让滚动条不可见。
确保仍然可以滚动：使用 -ms-overflow-style: none; 来隐藏 IE 和 Edge 浏览器中的滚动条，scrollbar-width: none; 用于 Firefox 浏览器。同时，通过设置 overflow-y: scroll; 确保页面仍然可以垂直滚动。

这样做的效果是：虽然用户看不到滚动条，但他们仍然可以通过鼠标滚轮或触摸板等方式滚动页面。

上一篇：vue exceljs

下一篇：vue 滚动条样式