如何从 UI 中隐藏滚动条但保持间距？

Question

我想隐藏 a 的滚动条，但保持滚动条空间完整，这样隐藏和显示之间的切换不会移动 UI 的布局。

我已经尝试过：

#element::-webkit-scrollbar {
visibility: none;
}

但不起作用。

我希望上述信息足够，但我愿意根据要求提供更多信息。感谢所有帮助。

Answer 1

看来你也遇到了和我一样的问题。对我有用的是我在网上研究发现的以下解决方案：

/* hide default scrollbar styles */
    .container {
      scrollbar-width: none; /*for Firefox */
      -ms-overflow-style: none; /*for IE & Edge */
    }
    
    /* webkit-based browsers */
    .container::-webkit-scrollbar {
      display: none;
    }
    
    /* scrollbar space */
    .container {
      width: calc(100% + 17px); /* change SPACEpx based on your needs*/
    }

您也可以尝试类似的方法：

overflow-x: hidden; /* horizontal */
overflow-y: hidden; /* vertical */

这个解决方案可能会导致可见性问题，但它对我来说从来没有用过。