Question

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

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

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

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

Answer 1

您还应该添加：

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

同时查看此答案。有用的Hiding the scrollbar on an HTML page

Answer 2

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

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

Answer 3

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

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

Answer 4

-webkit-overflow-scrolling：触摸；

将在IOS中隐藏滚动条

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

4 个答案: