react-browser-scrollbar/dist/react-browser-scrollbar.cjs.production.min.js

lightweight Scrollbar for ReactJs

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r,n=require("react"),t=(r=n)&&"object"==typeof r&&"default"in r?r.default:r,e=["children","darkMode","autoHide","thumbSize","onScroll","onScrollEnd","onScrollStop","onScrollStart","className"],o=null,l=!1;exports.default=n.forwardRef((function(r,a){var c=r.children,i=r.darkMode,b=r.autoHide,s=r.thumbSize,u=r.onScroll,d=r.onScrollEnd,h=r.onScrollStop,f=r.onScrollStart,g=r.className,k=function(r,n){if(null==r)return{};var t,e,o={},l=Object.keys(r);for(e=0;e<l.length;e++)n.indexOf(t=l[e])>=0||(o[t]=r[t]);return o}(r,e);n.useEffect((function(){a&&(a.scrollTo=function(r){a.current.scrollTo({top:r,behavior:"smooth"})},a.scrollToBottom=function(){a.scrollTo(a.current.scrollHeight)},a.scrollToTop=function(){a.scrollTo(0)}),function(){if(!document.getElementById("rbs")){var r=document.createElement("style");r.id="rbs",document.head.append(r),r.innerHTML="\n   .rbs{\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n   }\n   \n   ::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n   }\n\n   ::-webkit-scrollbar-track {\n      background: transparent\n   }\n   ::-webkit-scrollbar-thumb {\n      border-radius: 8px;\n      -webkit-border-radius: 8px;\n      background-clip: content-box;\n      background: rgba(11,20,26,.2);\n      \n   }\n   ::-webkit-scrollbar-thumb:hover{\n      background: rgba(11,20,26,.3)\n   }\n   .rbs-autohide:not(:hover, :active)::-webkit-scrollbar-thumb, .rbs-autohide:not(:hover, :active)::-webkit-scrollbar-track{\n      background-color: transparent\n   }\n\n   * {\n      scrollbar-color: rgba(11,20,26,.2) rgba(0,0,0,.05);\n      scrollbar-width: thin\n   }\n\n   .rbs-autohide:not(:hover, :active){\n      scrollbar-color: transparent transparent;\n   }\n\n   .rbs-dark::-webkit-scrollbar-thumb{\n      background: rgba(255,255,255,.16);\n   }\n\n   .rbs-dark::-webkit-scrollbar-thumb:hover{\n      background: rgba(255,255,255,.26);\n   }\n\n   .rbs-dark{\n      scrollbar-color: rgba(255,255,255,.26) tranparent;\n   }\n\n"}}()}),[]);var m=n.useId().replace(/:/gi,""),p="rbs "+(g||"");p+=i?" rbs-dark":"",p+=b?" rbs-autohide":"";var v={};return(u||d||h||f)&&(v.onScroll=function(r){if(d){var n=r.target;n.scrollHeight-n.scrollTop===n.clientHeight&&d(r)}h&&(clearTimeout(o),o=setTimeout((function(){return h(r)}),150)),f&&!l&&(f(r),l=!0,setTimeout((function(){return l=!1}),500)),u&&u(r)}),t.createElement(t.Fragment,null,t.createElement("style",null,function(r){var n=r.thumbSize,t="[data-rbs="+r.id+"]",e="";return void 0!==n&&(e+=0===n?"\n            "+t+"::-webkit-scrollbar{width: 0px; height: 0px}\n            "+t+"{scrollbar-width: none}\n         ":"\n            "+t+"::-webkit-scrollbar{width: "+n+"px; height: "+n+"px}\n            "+t+"{scrollbar-width: thin}\n         "),e}({id:m,thumbSize:s,autoHide:b})),t.createElement("div",Object.assign({},k,{ref:a,className:p},v,{"data-rbs":m}),c))}));
//# sourceMappingURL=react-browser-scrollbar.cjs.production.min.js.map