diff --git a/fakescroll.css b/fakescroll.css index 277c676..e473701 100644 --- a/fakescroll.css +++ b/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{ diff --git a/fakescroll.min.js b/fakescroll.min.js index da2a2fb..e69de29 100644 --- a/fakescroll.min.js +++ b/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=`
\n
\n
\n
\n
\n
`,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}}(); \ No newline at end of file diff --git a/index.html b/index.html index c3ec35a..1d470d2 100644 --- a/index.html +++ b/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; diff --git a/package.json b/package.json index 4651272..7ea8e43 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,15 @@ "name": "Yair Even-Or", "email": "vsync.design@gmail.com" }, - "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"