如何完全隐藏组件中的滚动条

Posted 2023-02-23

【中文标题】如何完全隐藏组件中的滚动条

【英文标题】：How to completely hide scrollbars in component

【发布时间】：2021-12-20 00:22:16

【问题描述】：

我有一个关于如何使用 CSS 样式从 html 组件中完全隐藏滚动条的问题。使用 VueJS 编写的组件。 一些解决方案，例如

body

    overflow-y: hidden;

不起作用，当我把它放在组件的开头时。当我将overflow-y: hidden; 放在css 的列表子类中时（用它替换overflow: scroll;），我失去了滚动条，但也失去了滚动的可能性。我目前需要在浏览器中没有滚动条的滚动面板。 我找到了一些代码，如下所示：

-ms-overflow-style: none;
scrollbar-width: none;

:-webkit-scrollbar 
    display: none;
    -webkit-appearance: none;

将此代码放在我的自定义列表的 CSS 类中，它可以工作，但仅在 Firefox 上。在 Chrome、Safari 等中它仍然显示滚动条，但它不应该。 我为此代码找到的来源是this，以及具有相同内容的任何其他来源，但仍然无济于事。 小部件组件代码示例：

    .v-root 
        .v-component-widget 
            .v-component-widget-header
                .v-component-widget-header-list
                    position: absolute;
                    overflow: scroll;

                    //Disable scrollbars
                    -ms-overflow-style: none;
                    scrollbar-width: none;

                    :-webkit-scrollbar 
                        display: none;
                        -webkit-appearance: none;
                    
                
            
        
    

所有这些类都专门用于div 块，其层次结构与此嵌套类相同。

【参考方案1】：

你所指的source也有明确的解决方案和解释。

selector 
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */


selector::-webkit-scrollbar   /* WebKit & Blink */
  width: 0px;
  height: 0px;

::-webkit-scrollbar 仅适用于 Blink 和基于 WebKit 的浏览器（例如 Chrome、Edge、Opera、Safari、ios 上的所有浏览器等）。参考 - https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

scrollbar-width - 适用于 Firefox 网页和安卓。参考 - https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

-ms-overflow-style - 支持 IE，现在已弃用并从 MDN 文档中删除。

我认为你在代码中打错了，尝试使用 :: 而不是 : 代替 -webkit-scrollbar。

演示：

.div 
  max-width: 400px;
  max-height: 200px;
  border: 1px solid gray;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */


.div::-webkit-scrollbar  /* WebKit & blink */
  width: 0px;
  height: 0px;

<div class="div">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
  et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
  rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
  vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
  dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
  nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>

【讨论】：

嗯，好的。通过分离类名和加倍 :: 现在它可以在 Chrome 中使用。但是 Safari 出乎意料地显示了这个滚动条。这个问题也包括Safari吗？或者如果不是 - 我可以用不同的方式禁用滚动条吗？

@AriosJentu ya 它也涵盖了野生动物园。 safari 使用 WebKit 渲染引擎。 ::-webkit-scrollbar 支持 WebKit 和 Blink。 Chrome、Edge、Opera、Safari，iOS 上的所有浏览器都是基于 WebKit 和 Blink 的浏览器。

是的，就是这样，但可能有问题 - safari 仍然显示滚动条

我正在使用 safari 它为我工作你使用的是哪个版本@AriosJentu

Safari 版本 15.1 (17612.2.9.1.20)