corrected dragging calculations there needed some fine-tuning to bett…

…er working when the drag event position was outside the bounds of the track
yairEO · Jul 5, 2018 · 4efb8fc · 4efb8fc
1 parent 5f9eb1d
commit 4efb8fc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/fakescroll.js b/fakescroll.js
@@ -120,6 +120,11 @@
 
                         if( isDragWithinTrackBounds )
                             this.DOM.scrollContent.scrollTop = this.state.drag + delta / this.state.scrollRatio;
+                        // update variables when mouse position is outside the Track bounds
+                        else{
+                            this.state.drag = this.DOM.scrollContent.scrollTop;
+                            this.state.lastPageY = e.pageY;
+                        }
                     });
                 },
 
@@ -132,6 +137,7 @@
                 onBarMouseDown(e){
                     this.state.drag = this.DOM.scrollContent.scrollTop;
                     this.state.lastPageY = e.pageY;
+
                     [this.DOM.bar, document.body].map(el => el.classList.add('fakeScroll--grabbed'))
                     this.events.drag.call(this, 'on');
                 },
@@ -172,7 +178,7 @@
                 scrollHeight = _scrollContent.scrollHeight,
                 ownHeight   = this.DOM.scrollWrap.clientHeight;
 
-            this.state.scrollRatio = ownHeight / scrollHeight;
+            this.state.scrollRatio = this.DOM.track.clientHeight / scrollHeight;
 
             // update fake scrollbar location on the Y axis using requestAnimationFrame
             raf(()=> {

diff --git a/index.html b/index.html
@@ -81,7 +81,7 @@ <h3>In this example the scrollbar is outside of the scrollable area and the "tra
                 <xmp>
 document.querySelector('.foo--outside').fakeScroll();
                 </xmp>
-                <p>Uber lightweight &amp; robust scrollbar replacement jQuery plugin. The internet deserves a performant custom scrollbar script that is flexible, easy to use and only weights 4k.</p>
+                <hr/>
                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
                 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                 <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
@@ -116,7 +116,7 @@ <h3>In this example the scrollbar is within the scrollable area and has an offse
     track : "smooth"
 });
                 </xmp>
-                <p>Uber lightweight &amp; robust scrollbar replacement jQuery plugin. The internet deserves a performant custom scrollbar script that is flexible, easy to use and only weights 4k.</p>
+                <hr/>
                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
                 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                 <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yaireo/fakescroll",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "homepage": "https://github.com/yairEO/fakescroll",
   "description": "Very lightweight & robust custom-looking HTML scrollbar script.",
   "_npmUser": {