How to completely hide scrollbars in component-CodePudding

I have a question about how to completely hide scrollbars from HTML component with CSS style. Component written using VueJS. Some solutions, like

body
{
    overflow-y: hidden;
}

doesn't work, when I put this in the beginning of the component. When I just put overflow-y: hidden; in list subclass in css, (replacing overflow: scroll; with it), I lose scrollbar, but also lose scrolling possibility. I need currently working scroll panel without scrollbars in browsers. I found some code, like this:

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

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

putting this code inside CSS class of my custom list, and it's work, but only on Firefox. In Chrome, Safari and etc it still shows scrollbars, but it shouldn't. Sources which I found for this code are this, and any others with the same content, but still won't help. Example of widget component code:

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

All this classes was used in specific for them div blocks, which hierarchy same as this nesting classes.

CodePudding user response：

The source which you are referring to has a clear solution and explanation too.

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

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

::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others). Ref - https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

scrollbar-width - for firefox web & android. Ref - https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

-ms-overflow-style - was supporting IE and now it is deprecated and removed from MDN docs.

I think you did a typo in your code try using :: instead of : for -webkit-scrollbar.

Demo:

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