Add support namespace

[ajiho]

issues#623

This issue mentions that scss directly imports the overlayscrollbars.css file

The method is as follows

@import '../../node_modules/overlayscrollbars/styles/overlayscrollbars';
.my-namingspace {

    // My own style
    color: aqua;
}

The compilation result is as follows：

/*! 
 * OverlayScrollbars
 * Version: 2.7.0
 * 
 * Copyright (c) Rene Haas | KingSora.
 * https://github.com/KingSora
 * 
 * Released under the MIT license.
 */
.os-size-observer,
.os-size-observer-listener {
  scroll-behavior: auto !important;
  direction: inherit;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
  box-sizing: border-box;
}

.os-size-observer,
.os-size-observer-listener,
.os-size-observer-listener-item,
.os-size-observer-listener-item-final {
  writing-mode: horizontal-tb;
  position: absolute;
  left: 0;
  top: 0;
}

/* ....It's too long, ignore it */

.my-namingspace {
  color: aqua;
}

There is no problem using it this way.

However, I want the style of OverlayScrollbars to be in my namespace, such as under. my naming space

.my-namingspace {
    @import '../../node_modules/overlayscrollbars/styles/overlayscrollbars';//Note: It has been moved here
    // My own style
    color: aqua;
}

The compiled results obtained are as follows

.my-namingspace {
  color: aqua;
}
.my-namingspace .os-size-observer,
.my-namingspace .os-size-observer-listener {
  scroll-behavior: auto !important;
  direction: inherit;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
  box-sizing: border-box;
}
.my-namingspace .os-size-observer,
.my-namingspace .os-size-observer-listener,
.my-namingspace .os-size-observer-listener-item,
.my-namingspace .os-size-observer-listener-item-final {
  writing-mode: horizontal-tb;
  position: absolute;
  left: 0;
  top: 0;
}
/* ....It's too long, ignore it */

The scrollbar will always appear, and your scrollbar style will also take effect simultaneously, making the effect abnormal

After my own attempts, I found that simply mentioning the following styles globally can make them work properly

[data-overlayscrollbars-initialize]::-webkit-scrollbar,
[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,
[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,
[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,
[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,
.os-environment-scrollbar-hidden::-webkit-scrollbar,
.os-environment-scrollbar-hidden::-webkit-scrollbar-corner {
  -webkit-appearance: none !important;
          appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

I will express myself as clearly as possible, which will help you solve the problem instead of reproducing it

Your document mentions： This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to generate its own elements. Those cases arise very often when you want an other library to work together with OverlayScrollbars.

Yes, I am using it in conjunction with other libraries and OverlayScrollbars, so I hope to make the styles of OverlayScrollbars only work under my style and become a complete part of my library, avoiding it from taking effect globally

stackblitz

[ajiho]

Sorry, it was fixed by upgrading to OverlayScrollbars2.7.1 I am closing it now 🤣

[KingSora]

Good day @ajiho :)

This works since v2.7.1 because I was forced to move a part of the css into the js bundle because of an bug in safari. This could change in the future and therefore break your implementation.

The styles of overlayscrollbars are not designed to be placed inside of an namespace. - I would recommend not to use the styles in this way.