[REFACTOR] - improved the way the scrollbar is hidden so it will be m…

…ore accurate, regardless of it's width

fakescroll.css

@@ -10,12 +10,18 @@
 .fakeScroll__content{
     height          : 100%;
     width           : 100%;
-    padding         : 0 32px 0 0;
+    /* padding         : 0 32px 0 0; */
+    /* right           : -18px; */
     position        : relative;
-    right           : -18px;
     overflow        : auto;
     -moz-box-sizing : border-box;
     box-sizing      : border-box;
+
+    scrollbar-width: none;
+}
+
+.fakeScroll__content::-webkit-scrollbar {
+    display: none;
 }
 
 .fakeScroll__track{

fakescroll.min.js

@@ -1 +0,0 @@
-!function(){function t(t,s){t&&(this.settings=Object.assign({},this.defaults,s||{}),this.callback=s.callback?s.callback:null,this.state={},this.listeners={},this.DOM=this.build(t),this.events.binding.call(this,this.DOM),setTimeout(this.moveBar.bind(this)))}raf=window.requestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)},t.prototype={defaults:{classname:"",track:!1},build(t){var s={};for(scopeHTML=`<div class="fakeScroll__wrap">\n                                <div class="fakeScroll__content"></div>\n                             </div>\n                             <div class='fakeScroll__track ${this.settings.classname}'>\n                                <div class="fakeScroll__bar"></div>\n                             </div>`,fragment=document.createDocumentFragment();t.childNodes.length;)fragment.appendChild(t.childNodes[0]);return t.insertAdjacentHTML("afterbegin",scopeHTML),s.scope=t,s.scrollWrap=t.firstElementChild,s.scrollContent=s.scrollWrap.firstElementChild,s.scrollContent.appendChild(fragment),s.track=s.scrollWrap.nextElementSibling,s.bar=s.track.firstElementChild,s.scope.classList.add("fakeScroll__scope"),s},destroy(){this.events.off.call(this,window,"resize","onScrollResize")},events:{on(t,s,e){return s.split(" ").forEach(s=>{e in this.events.callbacks||console.warn(e," doesn't exist in Callbacks: ",this.events.callbacks),this.listeners[s]=this.events.callbacks[e].bind(this),t.addEventListener(s,this.listeners[s])}),this.events},off(t,s,e){return s.split(" ").forEach(s=>t.removeEventListener(s,this.listeners[s])),this.events},binding(t){this.events.on.call(this,t.scrollContent,"scroll","onScrollResize").on.call(this,t.scope,"mouseenter","onScrollResize").on.call(this,t.bar,"mousedown","onBarMouseDown").on.call(this,window,"resize","onScrollResize"),this.settings.track&&this.events.on.call(this,t.track,"click","onTrackClick")},drag(t){this.events[t].call(this,document,"mousemove","onDrag")[t].call(this,document,"mouseup","onStopDrag")},callbacks:{onScrollResize(t){this.moveBar.call(this),clearTimeout(this.listeners.timeout__resize),this.listeners.timeout__resize=setTimeout(this.getTrackBounds.bind(this),200)},onDrag(t){var s=t.pageY-this.state.lastPageY;raf(()=>{var e=document.documentElement.scrollTop;t.pageY>=this.state.trackBounds.top+e&&t.pageY<=this.state.trackBounds.bottom+e?this.DOM.scrollContent.scrollTop=this.state.drag+s/this.state.scrollRatio:(this.state.drag=this.DOM.scrollContent.scrollTop,this.state.lastPageY=t.pageY)})},onStopDrag(t){[this.DOM.bar,document.body].map(t=>t.classList.remove("fakeScroll--grabbed")),this.events.drag.call(this,"off"),setTimeout(()=>{this.state.drag=!1})},onBarMouseDown(t){this.state.drag=this.DOM.scrollContent.scrollTop,this.state.lastPageY=t.pageY,[this.DOM.bar,document.body].map(t=>t.classList.add("fakeScroll--grabbed")),this.events.drag.call(this,"on")},onTrackClick(t){if(!this.state.drag){var s=(t.clientY-this.state.trackBounds.top)/(this.state.trackBounds.height-this.state.trackBounds.topPad-this.state.trackBounds.bottomPad)*(this.DOM.scrollContent.scrollHeight-this.DOM.scrollWrap.clientHeight);"smooth"==this.settings.track&&(this.DOM.scrollContent.style.scrollBehavior="smooth",setTimeout(()=>{this.DOM.scrollContent.style.scrollBehavior="unset"},500)),this.DOM.scrollContent.scrollTop=s}}}},getTrackBounds(){var t=this.DOM.track.getBoundingClientRect(),s=window.getComputedStyle(this.DOM.track,null);return t.topPad=parseInt(s.paddingTop,10),t.bottomPad=parseInt(s.paddingBottom,10),this.state.trackBounds=t,t},moveBar(){var t=this.DOM.scrollContent,s=t.scrollHeight,e=this.DOM.scrollWrap.clientHeight;this.state.scrollRatio=this.DOM.track.clientHeight/s,raf(()=>{var l=e/s*100,i=t.scrollTop/s*100;this.DOM.bar.style.cssText=`height  : ${l}%;\n                                              top     : ${i}%;\n                                              display : ${s<=e?"none":""}`})}},Element.prototype.fakeScroll=function(s){return this._fakeScroll=this._fakeScroll||new t(this,s||{}),this._fakeScroll}}();

index.html

@@ -30,7 +30,7 @@
             .foo{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; min-height:70%; height:1px; width:500px; overflow:auto; background:white; }
             .foo.fakeScroll__scope{ background:none; }
             .foo .fakeScroll__content{ padding-top:1em; padding-bottom:1em; }
-            .foo .fakeScroll__wrap{ background:#FFF; border-radius:4px; -moz-box-sizing:border-box; box-sizing:border-box; }
+            .foo .fakeScroll__wrap{ background:#FFF; border-radius:4px; }
 
             /* upper and bottom fades */
             .fakeScroll__wrap::before{ content:''; position:absolute; z-index:1; top:0; left:0; right:0; height:5%;
@@ -48,6 +48,10 @@
             /* .fakeScroll--inside .fakeScroll__content::after{ content:''; display:block; min-height:10000px; } */
 
 
+            .foo--inside{
+                padding-right: 2em;
+            }
+
             .foo--inside .fakeScroll__track{
                 background: rgba(0,0,0,.2);
                 right: 0;
@@ -64,7 +68,7 @@
                 width: 12px;
             }
 
-            .foo--inside .fakeScroll__bar{ background: #252233; border-radius: 20px 0 0 20px; }
+            .foo--inside .fakeScroll__bar{ background: #222; border-radius: 20px 0 0 20px; }
 
             .foo--inside:hover .fakeScroll__bar.fakeScroll--grabbed{
                 background: #3c3b52;

package.json

@@ -11,7 +11,15 @@
     "name": "Yair Even-Or",
     "email": "[email protected]"
   },
-  "main": "./fakescroll.min.js",
+  "scripts": {
+    "build": "npx terser -- fakescroll.js > fakescroll.min.js"
+  },
+  "files": [
+    "fakescroll.js",
+    "react.fakescroll.js",
+    "fakescroll.css"
+  ],
+  "main": "./fakescroll.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/yairEO/fakescroll.git"