Improved Engine

Added OnDragStop callback
Added new properties

Author: BMSVieira

css/letmescroll.css

@@ -16,19 +16,20 @@ Made by: Bruno Vieira
     margin: 0 auto;
     position: relative;
     overflow: hidden;
-    padding-right: 24px;
+    padding-right: 15px;
     max-width: 99%; /* 1% is for the scrollbar div */
 }
 
-.lms_scrollable.lms_showScroll::after {
+.lms_scroll_track
+{
+    background: var(--lms_scrollpath_bg);
+    border-radius: var(--lms_scrollpath_radius);  
+    width: 8px;
     position: absolute;
-    content: '';
-    top: 0%;
-    right: 3px;
+    right: 0px;
     height: 100%;
-    width: 8px;
-    background: var(--lms_scrollpath_bg);
-    border-radius: var(--lms_scrollpath_radius);
+    top: 0px;
+    transition: opacity 0.5s ease;
 }
 
 .lms_scrollable .lms_content_wrapper {
@@ -45,14 +46,13 @@ Made by: Bruno Vieira
 }
 
 .lms_scroller {
+    cursor: default;
     z-index: 5;
-    cursor: pointer;
     position: absolute;
-    width: 8px;
+    width: 100%;
     border-radius: var(--lms_scrollbar_radius);
     background: var(--lms_scrollbar_bg);
     top: 0px;
-    right: 3px;
     -webkit-transition: top .08s;
     -moz-transition: top .08s;
     -ms-transition: top .08s;

demo/index.html

@@ -83,7 +83,7 @@
                 <div class="row">
                     <div class="col-lg-12" style="border-bottom: 1px solid #1c2939; margin-bottom: 60px;">
                         <div class="mb-5 mb-lg-0 mb-lg-3" style="text-align:center; margin-top:70px; margin-bottom:28px!important;">
-                                <img src="https://raw.githubusercontent.com/BMSVieira/letmescroll.js/main/demo/img/letmescroll.png" style="max-width:600px; width:40%;">
+                        <img src="https://raw.githubusercontent.com/BMSVieira/letmescroll.js/main/demo/img/letmescroll.png" style="max-width:600px; width:40%;">
                         <p style=" font-size: 32pt; color: white; font-family: 'Cairo', sans-serif;">Scroll made easy!</p>
                          <a href="https://github.com/BMSVieira/letmescroll.js" target="_blank" style="cursor:pointer;" class="btn btn-dark  btn-sm">View on Github</a>
                         </div>
@@ -171,7 +171,8 @@ <h3>Super easy-to-use scrollbar</h3>
                             height : "300px"
                         },
                         scroll : {
-                          bottomOffset: 0
+                          bottomOffset: 0,
+                          autoHide: true
                         }
                   },
                   onEnd: function(){
@@ -185,6 +186,9 @@ <h3>Super easy-to-use scrollbar</h3>
                   },
                   onDragStart: function(){
                     document.getElementById("lms_console").insertAdjacentHTML("afterbegin", "<p class='pre_started'><b style='color:#ededed'>onDragStart:</b>  Drag has started.</p>");
+                  },
+                  onDragStop: function(){
+                    document.getElementById("lms_console").insertAdjacentHTML("afterbegin", "<p class='pre_stopped'><b style='color:#ededed'>onDragStop:</b>  Drag has stopped.</p>");
                   }
                 });
         });

js/letmescroll.js

@@ -16,13 +16,15 @@ class LetMeScroll {
                     height : "500px"
                 },
                 scroll : {
-                    bottomOffset: 0
+                    bottomOffset: 0,
+                    autoHide: false
                 }
             },
             onEnd: function(){},
             onTop: function(){},
             onMove: function(){},
-            onDragStart: function(){}
+            onDragStart: function(){},
+            onDragStop: function(){}
         };      
 
         // Scroll Random ID
@@ -70,6 +72,13 @@ class LetMeScroll {
             }
         }
 
+        /*
+        ** Hide Elements
+        */
+        var hideElement = this.hideElement = function hideElement(element, value) {
+            element.style.opacity = value;
+        }
+
         /*
         ** Calculate Scrollbar Height
         */
@@ -147,7 +156,6 @@ class LetMeScroll {
             // oTop callback()
             if(evt.target.scrollTop <= 0){ if (typeof _this.onTop == "function") { _this.onTop(); } }
 
-
         }
 
         /*
@@ -169,7 +177,13 @@ class LetMeScroll {
         var stopDrag = this.stopDrag = function stopDrag(evt) {
 
             // Dispatch event when drag is stoppped
-            scrollerBeingDragged = false;
+            if(scrollerBeingDragged == true)
+            {
+                scrollerBeingDragged = false;
+                // OnDragStop callback()
+                if (typeof _this.onDragStop == "function") { _this.onDragStop(); } 
+            }
+
         }
 
         /*
@@ -223,48 +237,69 @@ class LetMeScroll {
             let selectorElementHTML = selectorElement.innerHTML;
             selectorElement.innerHTML = "";
 
-            // Criar uma div e colocar la todo o conteudo
+            // Creates div main div
             selectorElement.insertAdjacentHTML("afterbegin", "<div id='scroll_inner_"+randomID+"' class='lms_content_wrapper'></div>");
             let scrollInner = document.getElementById("scroll_inner_"+randomID);
 
-            scrollInner.insertAdjacentHTML("afterbegin", "<div id='scroll_content_"+randomID+"' class='lms_content'></div>");
+            // Creates div and track div
+            scrollInner.insertAdjacentHTML("afterbegin", "<div id='scroll_content_"+randomID+"' class='lms_content'></div> <div id='lms_track_"+randomID+"' class='lms_scroll_track'></div>");
             let scrollContent = document.getElementById("scroll_content_"+randomID);
+            let scrollTrack = document.getElementById("lms_track_"+randomID);
+
+            // Content from original elements into the created elements
             scrollContent.innerHTML = selectorElementHTML;
 
+            // Define variables from new elements
+            this.scrollTrack = scrollTrack;
             this.scrollElement = scrollInner;
             this.scrollContent = scrollContent;
             this.mainElement = selectorElement;
 
             scrollContainer = selectorElement;
             scrollContentWrapper = scrollInner;
 
+            // Calculate scrollbar height
+            scrollerHeight = calculateScrollerHeight();
+            
+            // Check if scrollbar is needed based on height
+            if (scrollerHeight / scrollContainer.offsetHeight < 1){
+
                 // Creat scrollbar div
-                scroller = document.createElement("div");
-                scroller.className = 'lms_scroller';
+                scrollTrack.insertAdjacentHTML("beforeend", "<div id='lms_scroller_"+randomID+"' class='lms_scroller'></div>");
+                scroller = document.getElementById("lms_scroller_"+randomID);
                 this.scroller = scroller;
 
-                // Calculate scrollbar height
-                scrollerHeight = calculateScrollerHeight();
+                // Apply scrollbar height
+                scroller.style.height = scrollerHeight + 'px';
+            
+                // Show scroll path divot
+                scrollContainer.className += ' lms_showScroll';
 
-                if (scrollerHeight / scrollContainer.offsetHeight < 1){
-
-                    // Apply scrollbar height
-                    scroller.style.height = scrollerHeight + 'px';
+                // Attach related draggable listeners
+                scroller.addEventListener('mousedown', startDrag);
+                window.addEventListener('mouseup', stopDrag);
+                window.addEventListener('mousemove', scrollBarScroll);
+            }
+            
+            // Add global listeners
+            scrollContentWrapper.addEventListener('scroll', moveScroller);
 
-                    // Append scroller to scrollContainer div
-                    scrollContainer.appendChild(scroller);
-                    
-                    // Show scroll path divot
-                    scrollContainer.className += ' lms_showScroll';
-                    
-                    // Attach related draggable listeners
-                    scroller.addEventListener('mousedown', startDrag);
-                    window.addEventListener('mouseup', stopDrag);
-                    window.addEventListener('mousemove', scrollBarScroll);
+            // Check if options are available
+            if(options.config.scroll.autoHide == true)
+            {   
+                this.hideElement(scroller, 0);
+                if(!androidOrIOS()) // Check if it is mobile
+                {
+                    scrollContainer.addEventListener("mouseover", function(){ _this.hideElement(scroller, 1); }); 
+                    scrollContainer.addEventListener("mouseout", function(){  _this.hideElement(scroller, 0); });    
+                } else {
+                    scrollContainer.addEventListener("touchstart", function(){ _this.hideElement(scroller, 1); }); 
+                    scrollContainer.addEventListener("touchend", function(){  _this.hideElement(scroller, 0); });   
                 }
-                
-                // *** Listeners ***
-                scrollContentWrapper.addEventListener('scroll', moveScroller);
+
+            }
+
+           
         }
 
         // Init