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

Question

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

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

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

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

Answer 1

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

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

Answer 2

您还应该添加以下内容：

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

另请检查此答案。隐藏 HTML 页面上的滚动条很有用

Answer 3

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

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