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

Question

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

body
{
    overflow-y: hidden;
}

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

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

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

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

    .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;
                    }
                }
            }
        }
    }

所有这些 classes 都专门用于 div 块，其层次结构与此嵌套 classes.

Answer 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 网络 & android。参考 - 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>

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

How to completely hide scrollbars in component

html

css

vue.js

vue-component