@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
48 lines • 2.61 kB
JavaScript
var ScrollbarStyleHandler = /** @class */ (function () {
function ScrollbarStyleHandler() {
this._styleElementId = "scrollStyle";
this._isCustomScrollbarStyleEnabled = false;
this._scrollbarStyle = this._createScrollbarStyle();
}
Object.defineProperty(ScrollbarStyleHandler.prototype, "isCustomScrollbarStyleEnabled", {
get: function () {
return this._isCustomScrollbarStyleEnabled;
},
set: function (value) {
this._isCustomScrollbarStyleEnabled = value;
this._updateScrollbarStyle();
},
enumerable: true,
configurable: true
});
ScrollbarStyleHandler.prototype._updateScrollbarStyle = function () {
if (this._isCustomScrollbarStyleEnabled) {
this._enableCustomScrollbarStyle();
}
else {
this._disableCustomScrollbarStyle();
}
};
ScrollbarStyleHandler.prototype._enableCustomScrollbarStyle = function () {
if (document.head.querySelector("#" + this._styleElementId) != null) {
return;
}
document.head.appendChild(this._scrollbarStyle);
};
ScrollbarStyleHandler.prototype._disableCustomScrollbarStyle = function () {
if (document.head.querySelector("#" + this._styleElementId) == null) {
return;
}
document.head.removeChild(this._scrollbarStyle);
};
ScrollbarStyleHandler.prototype._createScrollbarStyle = function () {
var style = document.createElement("style");
style.type = "text/css";
style.id = this._styleElementId;
style.innerHTML = "\n ::-webkit-scrollbar\n {\n width: 8px;\n height: 8px;\n background: transparent;\n }\n\n ::-webkit-scrollbar-track\n {\n background: transparent; \n }\n\n ::-webkit-scrollbar-thumb\n {\n background: rgba(0,0,0,0.1);\n border-radius: 4px\n }\n\n ::-webkit-scrollbar-thumb:hover\n {\n background: rgba(0,0,0,0.2);\n }\n\n ::-webkit-scrollbar-thumb:active\n {\n background: rgba(0,0,0,0.3);\n }\n\n #Content * {\n scrollbar-color: rgba(0,0,0,0.2) !important transparent;\n scrollbar-width: thin !important;\n }\n ";
return style;
};
return ScrollbarStyleHandler;
}());
export { ScrollbarStyleHandler };
//# sourceMappingURL=ScrollbarStyleHandler.js.map