♻️ remove $.extend(), replace scrollTop with pure JS solution

Author: phucbm

jquery.scroll-direction.js

@@ -6,7 +6,7 @@
  * Date: 2021-06-20
  */
 
-(function ($) {
+(function($){
     "use strict";
 
     let obj = {},
@@ -24,24 +24,24 @@
             scrollAtMiddleClass: "scroll-middle",
             scrollAtBottomClass: "scroll-bottom",
             extraIndicators: {},
-            scrollAmount: () => $w.scrollTop(),
-            maxScrollAmount: () => $(document).height() - $w.height(),
+            scrollAmount: () => (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0),
+            maxScrollAmount: () => $(document).height() - (window.innerHeight || document.documentElement.clientHeight),
             hijacking: false, // turn this on to run update() in custom event
         },
         lastScrollAmount = false;
 
     // Method: init()
-    obj.init = function (options) {
+    obj.init = function(options){
         pluginActive = true;
-        settings = $.extend(settings, options);
+        settings = {...settings, ...options};
     };
 
     // Method: update() for custom hijacking event
-    obj.update = function (options) {
-        settings = $.extend(settings, options);
+    obj.update = function(options){
+        settings = {...settings, ...options};
 
         // on hijacking
-        if (settings.hijacking) {
+        if(settings.hijacking){
             update();
         }
     };
@@ -62,60 +62,62 @@
         scrollAtBottom = $.Event("scrollAtBottom");
 
     // Indicator: add class to indicate the scrolling status
-    function indicator(options) {
-        if (settings.indicator) {
-            let indicators = $.extend({
-                    "values": [
-                        obj.isScrollUp,
-                        obj.isScrollDown,
-                        obj.isScrollAtTop,
-                        obj.isScrollAtMiddle,
-                        obj.isScrollAtBottom
-                    ],
-                    "classes": [
-                        settings.scrollUpClass,
-                        settings.scrollDownClass,
-                        settings.scrollAtTopClass,
-                        settings.scrollAtMiddleClass,
-                        settings.scrollAtBottomClass
-                    ]
-                }, options),
+    function indicator(options){
+        if(settings.indicator){
+            let indicators = {
+                    ...{
+                        "values": [
+                            obj.isScrollUp,
+                            obj.isScrollDown,
+                            obj.isScrollAtTop,
+                            obj.isScrollAtMiddle,
+                            obj.isScrollAtBottom
+                        ],
+                        "classes": [
+                            settings.scrollUpClass,
+                            settings.scrollDownClass,
+                            settings.scrollAtTopClass,
+                            settings.scrollAtMiddleClass,
+                            settings.scrollAtBottomClass
+                        ]
+                    }, ...options
+                },
                 i = 0,
                 l = indicators.values.length;
 
-            for (i; i < l; i++) {
-                if (indicators.values[i]) {
+            for(i; i < l; i++){
+                if(indicators.values[i]){
                     settings.indicatorElement.addClass(indicators.classes[i]);
-                } else {
+                }else{
                     settings.indicatorElement.removeClass(indicators.classes[i]);
                 }
             }
         }
     }
 
     // update
-    function update() {
-        if (pluginActive) {
+    function update(){
+        if(pluginActive){
             // check scroll directions
-            if (settings.scrollAmount() > lastScrollAmount && lastScrollAmount >= 0) {
+            if(settings.scrollAmount() > lastScrollAmount && lastScrollAmount >= 0){
                 // scroll down
                 obj.isScrollUp = false;
                 obj.isScrollDown = true;
 
                 $w.trigger(scrollDown);
-            } else if (settings.scrollAmount() < lastScrollAmount && lastScrollAmount >= 0) {
+            }else if(settings.scrollAmount() < lastScrollAmount && lastScrollAmount >= 0){
                 // scroll up
                 obj.isScrollUp = true;
                 obj.isScrollDown = false;
 
                 $w.trigger(scrollUp);
-            } else if (settings.scrollAmount() < 0) {
+            }else if(settings.scrollAmount() < 0){
                 // scroll up (elastic scroll with negative value)
                 obj.isScrollUp = true;
                 obj.isScrollDown = false;
 
                 $w.trigger(scrollUp);
-            } else if (settings.scrollAmount() > settings.maxScrollAmount()) {
+            }else if(settings.scrollAmount() > settings.maxScrollAmount()){
                 // scroll down (elastic scroll with positive value)
                 obj.isScrollUp = false;
                 obj.isScrollDown = true;
@@ -127,29 +129,29 @@
             lastScrollAmount = settings.scrollAmount();
 
             // check scroll positions
-            if (settings.scrollAmount() <= settings.topOffset()) {
+            if(settings.scrollAmount() <= settings.topOffset()){
                 // at top
                 obj.isScrollAtTop = true;
                 obj.isScrollAtMiddle = false;
                 obj.isScrollAtBottom = false;
 
                 $w.trigger(scrollAtTop);
-            } else if (
+            }else if(
                 settings.scrollAmount() >= settings.maxScrollAmount() - settings.bottomOffset() &&
                 settings.scrollAmount() <= settings.maxScrollAmount()
-            ) {
+            ){
                 // at bottom
                 obj.isScrollAtTop = false;
                 obj.isScrollAtMiddle = false;
                 obj.isScrollAtBottom = true;
 
                 $w.trigger(scrollAtBottom);
 
-                if (settings.atBottomIsAtMiddle) {
+                if(settings.atBottomIsAtMiddle){
                     obj.isScrollAtMiddle = true;
                     $w.trigger(scrollAtMiddle);
                 }
-            } else {
+            }else{
                 // at middle
                 obj.isScrollAtTop = false;
                 obj.isScrollAtMiddle = true;
@@ -164,7 +166,7 @@
             // Extra indicators
             let i = 0,
                 l = settings.extraIndicators.length;
-            for (i; i < l; i++) {
+            for(i; i < l; i++){
                 indicator({
                     "values": [settings.scrollAmount() >= settings.extraIndicators[i]["element"].offset().top],
                     "classes": [settings.extraIndicators[i]["class"]]
@@ -176,15 +178,15 @@
     }
 
     // update on window events
-    if (!settings.hijacking) {
-        $w.on("load scroll resize", function () {
+    if(!settings.hijacking){
+        $w.on("load scroll resize", function(){
             // update values
             update();
         });
     }
 
     // Only assign to jQuery.scrollDirection if jQuery is loaded
-    if (jQuery) {
+    if(jQuery){
         jQuery.scrollDirection = obj;
     }
 })(jQuery);