自定义滚动条跨浏览器

Question

我发现以下代码允许我通过将 width/heigth 设置为 0px 来 "hide" 滚动条。它在 Chrome 上运行良好，但在 Firefox 上运行不佳。我希望它也能在其他浏览器中工作。

有没有办法让它工作或等效地使滚动条的宽度为 0（并且不可见），这样它就不会占用我容器的任何 space？

请注意，我找到了隐藏滚动条的方法。我不打算按照其他问题中的建议通过使用 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;
}

自定义滚动条跨浏览器

Custom scroll bar cross browser

html

css

jquery

scroll

cross-browser