通过 css 隐藏滚动条在 Safari 中不起作用，如何解决？答案

【问题标题】：Hiding scrollbars via css doesn't work in Safari, how to fix it?通过 css 隐藏滚动条在 Safari 中不起作用，如何解决？
【发布时间】：2026-02-04 01:55:02
【问题描述】：

我正在尝试通过 CSS 规则隐藏 html 元素的滚动条：

.element::-webkit-scrollbar {width: 0;}

它在 Chrome 中运行良好，但 在 Safari 中不起作用，虽然它也不基于 webkit 并且应该支持此规则。

任何想法，为什么会发生以及如何解决？

【问题讨论】：

试试看这个可能对你的*.com/questions/11691718/…有帮助

标签： css safari

【解决方案1】：

根据使用 z-index 定位/分层元素的方式，除了隐藏滚动条的外观外，您可能还需要将滚动条的宽度/高度设置为 0。否则，内容将是滚动轨道区域下包含的内容可能会被隐藏。

.element::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0;
    height: 0;
}

【讨论】：

【解决方案2】：

你也应该添加这个：

.element::-webkit-scrollbar {
    -webkit-appearance: none;
}

还要检查这个答案。有用Hiding the scrollbar on an HTML page

【讨论】：

感谢您的回答！但这没有帮助。这很奇怪，因为它显然应该适用于 Safari，就像它适用于 Chrome 一样。更详细一点，我在基于 Sencha ExtJS 框架的系统中遇到了这个问题。但我认为这不是原因。

【解决方案3】：

对于跨浏览器，使用以下 -

.hide-scrollbar {
  /*FireFox*/
  scrollbar-width: none;
  /*IE10+*/
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.hide-scrollbar::-webkit-scrollbar {
  /*Chrome, Safari, Edge*/
  display: none;
}

【讨论】：