Scrollbar finished

New scrollbar with no lag setup finished

Frontend/Index.html

@@ -700,14 +700,11 @@
     <!-- Footer end -->
     <!-- Body scripts -->
     <script src="Javascript/OverlayScrollbar.js"></script>
-    <script src="Javascript/ScrollController.js"></script>
-
     <script src="Javascript/Collapsible.js"></script>
     <script src="Javascript/PasswordValidation.js"></script>
     <script src="Javascript/Kalender.js"></script>
     <script src="Javascript/SpinningWheel.js"></script>
     <script src="Javascript/minibar.min.js"></script>
-    <!-- <script src="Javascript/HeaderFunctionality.js"></script> -->
     <script src="Javascript/LoginFunctionality.js"></script>
     <!-- Body scripts end -->
 </body>

Frontend/Javascript/HeaderFunctionality.js

@@ -1,145 +0,0 @@
-$(document).ready(function() {
-    const scrollableObj = document.getElementById('content');
-
-    var scrollBar = new MiniBar('#content', {
-        barType: "default",
-        scrollX: false,
-        scrollY: true,
-        scrollAmount: 20,
-        onScroll: function() {
-            // Resize header on scroll.
-            if($('.smart-scroll').length > 0) {
-                scrollableObj.addEventListener('wheel', ScrollDirection);
-
-                const NavCollapse = document.getElementById('navbarSupportedContent');
-
-                const BackToTop = $('#return-to-top');
-                const nav = $('.smart-scroll');
-                const body = $('body');
-
-                const container = document.querySelector('.mb-content');
-
-                if (container.scrollTop <= 0)
-                {
-                    body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
-                    nav.removeClass('scrolled-down').addClass('scrolled-up');
-                    BackToTop.fadeOut(300);
-                    scrollBar.update();
-                }
-
-
-                function ScrollDirection(event) {
-                    var delta;
-
-                    if (event.wheelDelta) 
-                    {
-                        delta = event.wheelDelta;
-                    } 
-                    else 
-                    {
-                        delta = -1 * event.deltaY;
-                    }
-
-                    if (delta < 0) 
-                    {
-                        body.removeClass('bodyScrolled-up').addClass('bodyScrolled-down');
-                        nav.removeClass('scrolled-up').addClass('scrolled-down');
-                        BackToTop.fadeIn(300);
-                        NavCollapse.classList.remove('show');
-                        scrollBar.update();
-                    } 
-                    else if (delta > 0) 
-                    {
-                        body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
-                        nav.removeClass('scrolled-down').addClass('scrolled-up');
-                        BackToTop.fadeOut(300);
-                        scrollBar.update();
-                    }
-                }
-            }
-        }
-    });
-
-    $('body').onSwipe(function(results) {
-        const NavCollapse = document.getElementById('navbarSupportedContent');
-
-        const BackToTop = $('#return-to-top');
-        const nav = $('.smart-scroll');
-        const body = $('body');
-
-        if (results.up)
-        {
-            body.removeClass('bodyScrolled-up').addClass('bodyScrolled-down');
-            nav.removeClass('scrolled-up').addClass('scrolled-down');
-            BackToTop.fadeIn(300);
-            NavCollapse.classList.remove('show');
-        }
-
-        if (results.down)
-        {
-            body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
-            nav.removeClass('scrolled-down').addClass('scrolled-up');
-            BackToTop.fadeOut(300);
-        }
-    })
-
-    GoToTop = function() {
-        scrollBar.scrollToTop();
-
-        // Show the Navbar on click.
-        $('#header').removeClass('scrolled-down').addClass('scrolled-up');
-        $('body').removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
-
-        $('#return-to-top').fadeOut(300);
-    }
-
-    // Floating button functionality
-    $('#return-to-top').click(function() {
-        GoToTop();
-    });
-    
-    // Smooth scrolling when click to nav
-    $('.NavLink').click(function(e) {
-        // Target element id.
-        var id = $(this).attr('href');
-
-        // Target element.
-        var $id = $(id);
-
-        // If no id was provided, return nothing.
-        if ($id.length === 0) 
-        {
-            return;
-        }
-
-        // Prevent standard hash navigation (avoid blinking in IE).
-        e.preventDefault();
-
-        // Top position relative to the document.
-        var pos = $id.position().top;
-
-        if (pos >= 0)
-        {
-            $('#return-to-top').fadeIn(300);
-        }
-
-        // Animated top scrolling.
-        if (pos === 0)
-        {
-            scrollBar.scrollTo(pos, 'y');
-        }
-        else if (pos > 0)
-        {
-            scrollBar.scrollBy(pos, 'y');
-        }
-        else if (pos < 0)
-        {
-            scrollBar.scrollBy(pos, 'y');
-        }
-
-        // Hide the Navbar on click.
-        $('#header').addClass('scrolled-down');
-        $('body').addClass('bodyScrolled-down');
-        return;
-    });
-});

Frontend/Javascript/OverlayScrollbar.js

@@ -1,10 +1,47 @@
+let instance;
+
 document.addEventListener("DOMContentLoaded", function() {
     //The first argument are the elements to which the plugin shall be initialized
     //The second argument has to be at least a empty object or a object with your desired options
-    OverlayScrollbars(document.querySelectorAll('body'), { });
+    instance = OverlayScrollbars(document.querySelectorAll('body'), { });
 });
 
 $(function() {
-    //The passed argument has to be at least a empty object or a object with your desired options
+
-    $('body').overlayScrollbars({ });
+    var prevScrollpos = instance.scroll().position.y;
+    const BackToTop = $('#return-to-top');
+
+    instance.options("callbacks.onScroll", function(e) {
+
+        var currentScrollPos = instance.scroll().position.y;
+        if (prevScrollpos > currentScrollPos) {
+            //Scroll down
+            $("#header").css({"top" : "0"});
+        } else {
+            //Scroll up
+            $("#header").css({"top" : "-50px"});
+        }
+
+        if (currentScrollPos <= 50) {
+            //Scroll down
+            BackToTop.fadeOut(300);
+        } else {
+            //Scroll up
+            BackToTop.fadeIn(300);
+        }
+
+        prevScrollpos = currentScrollPos;
+    });
+
+    GoToTop = function() {
+        instance.scroll({ y : "0%"  });
+
+        $("#header").css({"top" : "0"});
+        BackToTop.fadeOut(300);
+    }
+
+    // Floating button functionality
+    $('#return-to-top').click(function() {
+        GoToTop();
+    });
 });

Frontend/Javascript/ScrollController.js

@@ -1,21 +0,0 @@
-/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
-$(document).ready(function() {
-    var instance = $('body').overlayScrollbars(); 
-    var prevScrollpos = instance.scroll().position.y;
-
-    console.log(prevScrollpos);
-
-    window.onscroll = function() {
-
-        var currentScrollPos = instance.scroll().position.y;
-        console.log(currentScrollPos);
-        if (prevScrollpos > currentScrollPos) {
-                $("#header").css({"top" : "0"});
-        } else {
-                $("#header").css({"top" : "-50px"});
-        }
-
-        prevScrollpos = currentScrollPos;
-    }
-
-});