自定义滚动条跨浏览器

Question

我发现以下代码，使我可以通过将宽度/高度设置为0px来“隐藏”滚动条。它在Chrome上效果很好，但在Firefox上效果不好。我希望它也可以在其他浏览器中工作。

有没有办法使其工作或使滚动条的宽度为0（且不可见），这样它就不会占用容器的任何空间了？

请注意，我找到了一种隐藏滚动条的方法。我不打算通过使用 overflow：hidden 来禁用其他问题中建议的功能。我也想使其在其他浏览器中工作。那就是我希望您能帮助我...

提前感谢您帮助这个新手！

.scrolling-div {
  overflow: auto;
}

::-webkit-scrollbar
{
  width: 0px;  /* for vertical scrollbars */
  height: 0px; /* for horizontal scrollbars */
}

::-moz-scrollbar {
  width: 0px;
  height: 0px;
}

Answer 1

这是问题的解决方案：

// *** HIDING THE SCROLLBAR ***
// For Chrome, Safari, and Opera
.scrolling-div::-webkit-scrollbar {
  display: none;
}

// For Firefox
.scrolling-div {
  scrollbar-width: none;
};

// For Internet Explorer and Edge
.scrolling-div::-ms-scrollbar {
  overflow-style: none;
}