自定义滚动条跨浏览器[重复]

Posted 2023-03-06

【中文标题】自定义滚动条跨浏览器[重复]

【英文标题】：Custom scroll bar cross browser [duplicate]

【发布时间】：2020-01-27 14:55:40

【问题描述】：

我发现以下代码允许我通过将宽度/高度设置为 0 像素来“隐藏”滚动条。它适用于 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;

【问题讨论】：

感谢您提供指向该问题的链接@Moob。然而，虽然这些问题看起来很相似，但它们并不重复，原因如下：我不想禁用滚动功能。通过使用溢出：隐藏；按照该问题的建议，我将无法滚动浏览我的内容。该问题还显示了隐藏我设法做到的滚动条的等价物。我的问题的重点是让它在其他浏览器中也能工作......

您是否尝试过使用overflow: visible;？

它也不起作用。我现在添加了这个问题，应该滚动的 div 在我的代码中有溢出：auto。

overflow: auto; 将添加滚动条，如果它变得大于视口。另外，您能否在使用@ 发表评论时标记我，否则我不会收到通知。

哎呀@HaldenCollier。感谢您的解释。但是，我刚刚找到了我的问题的解决方案。它张贴在下面。

【参考方案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;