From 656e6ee584c7a2a21beb5e8ea649b9a899a19835 Mon Sep 17 00:00:00 2001 From: phucbm Date: Tue, 8 Feb 2022 16:22:50 +0700 Subject: [PATCH 1/5] :sparkles: setup gulp server --- README.md | 14 +++ gulpfile.js | 16 +++ index.html | 183 +++++++++++++++++++++++++++++++++ jquery.scroll-direction.min.js | 8 -- package.json | 6 ++ 5 files changed, 219 insertions(+), 8 deletions(-) create mode 100644 gulpfile.js create mode 100644 index.html delete mode 100644 jquery.scroll-direction.min.js create mode 100644 package.json diff --git a/README.md b/README.md index 2283fb4..fe7b525 100644 --- a/README.md +++ b/README.md @@ -153,3 +153,17 @@ if($.scrollDirection.isScrollUp){ // do something } ``` + +## Deployment + +Install gulp + +```shell +npm install +``` + +And start test server + +```shell +gulp serve +``` \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..33820b9 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,16 @@ +const gulp = require('gulp'); +const browserSync = require('browser-sync').create(); + +// Static server +gulp.task('serve', function(){ + // Watch for all files change and reload + gulp.watch('**').on('change', () => { + browserSync.reload(); + }); + + + browserSync.init({ + // serve files from root directory + server: {baseDir: "./"} + }); +}); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e002418 --- /dev/null +++ b/index.html @@ -0,0 +1,183 @@ + + + + + + Title + + + + + +
+

jQuery Scroll Direction Plugin

+
https://github.com/phucbm/jquery-scroll-direction-plugin +
+
+
+

Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices. +

+

+ Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus. + Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo. +

+

+ Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum + justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus + mi consequat dis dictumst si. +

+

+ Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula. + Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis. +

+

+ Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per + tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.

+

Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices. +

+

+ Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus. + Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo. +

+

+ Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum + justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus + mi consequat dis dictumst si. +

+

+ Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula. + Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis. +

+

+ Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per + tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.

+

Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices. +

+

+ Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus. + Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo. +

+

+ Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum + justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus + mi consequat dis dictumst si. +

+

+ Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula. + Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis. +

+

+ Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per + tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.

+

Elit urna pede laoreet aptent elementum nullam lacinia lacus. Maecenas purus habitasse mollis ultrices. +

+

+ Massa ultrices elementum porta consequat. Cursus litora pulvinar ex hendrerit. Eget curae arcu metus ridiculus. + Senectus praesent etiam hac mollis quisque nascetur vestibulum velit justo. +

+

+ Mi semper lorem diam nunc fringilla. Cubilia interdum nascetur sagittis rhoncus massa vestibulum mi rutrum + justo. Tempus praesent curae elementum pede diam phasellus eros morbi donec. Vehicula montes luctus class tellus + mi consequat dis dictumst si. +

+

+ Habitasse nulla arcu nullam massa sed mattis imperdiet. Potenti nam mattis feugiat est rutrum ut urna vehicula. + Imperdiet rhoncus suspendisse proin class condimentum sociosqu duis. +

+

+ Bibendum ut vitae risus litora. Aptent risus class ridiculus scelerisque adipiscing quam. Pulvinar nibh per + tellus sem penatibus luctus potenti. Etiam malesuada aptent orci consectetur ut montes nostra.

+
+ + +
+ + + + + + + \ No newline at end of file diff --git a/jquery.scroll-direction.min.js b/jquery.scroll-direction.min.js deleted file mode 100644 index 7b3020f..0000000 --- a/jquery.scroll-direction.min.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * jQuery Scroll Direction Plugin 1.1.0 - * https://github.com/phucbm/jquery-scroll-direction-plugin - * - * Released under the MIT license - * Date: 2021-06-20 - */ -!function(l){"use strict";let o={},t=!1,s=l(window),r={topOffset:()=>0,bottomOffset:()=>0,atBottomIsAtMiddle:!0,indicator:!0,indicatorElement:l("body"),scrollUpClass:"scroll-up",scrollDownClass:"scroll-down",scrollAtTopClass:"scroll-top",scrollAtMiddleClass:"scroll-middle",scrollAtBottomClass:"scroll-bottom",extraIndicators:{},scrollAmount:()=>s.scrollTop(),maxScrollAmount:()=>l(document).height()-s.height(),hijacking:!1},c=!1;o.init=function(o){t=!0,r=l.extend(r,o)},o.update=function(o){r=l.extend(r,o),r.hijacking&&u()},o.isScrollUp=!1,o.isScrollDown=!1,o.isScrollAtTop=!1,o.isScrollAtMiddle=!1,o.isScrollAtBottom=!1;let i=l.Event("scrollDirection"),e=l.Event("scrollDown"),n=l.Event("scrollUp"),a=l.Event("scrollAtTop"),d=l.Event("scrollAtMiddle"),A=l.Event("scrollAtBottom");function m(t){if(r.indicator){let s=l.extend({values:[o.isScrollUp,o.isScrollDown,o.isScrollAtTop,o.isScrollAtMiddle,o.isScrollAtBottom],classes:[r.scrollUpClass,r.scrollDownClass,r.scrollAtTopClass,r.scrollAtMiddleClass,r.scrollAtBottomClass]},t),c=0,i=s.values.length;for(;cc&&c>=0?(o.isScrollUp=!1,o.isScrollDown=!0,s.trigger(e)):r.scrollAmount()=0||r.scrollAmount()<0?(o.isScrollUp=!0,o.isScrollDown=!1,s.trigger(n)):r.scrollAmount()>r.maxScrollAmount()&&(o.isScrollUp=!1,o.isScrollDown=!0,s.trigger(e)),c=r.scrollAmount(),r.scrollAmount()<=r.topOffset()?(o.isScrollAtTop=!0,o.isScrollAtMiddle=!1,o.isScrollAtBottom=!1,s.trigger(a)):r.scrollAmount()>=r.maxScrollAmount()-r.bottomOffset()&&r.scrollAmount()<=r.maxScrollAmount()?(o.isScrollAtTop=!1,o.isScrollAtMiddle=!1,o.isScrollAtBottom=!0,s.trigger(A),r.atBottomIsAtMiddle&&(o.isScrollAtMiddle=!0,s.trigger(d))):(o.isScrollAtTop=!1,o.isScrollAtMiddle=!0,o.isScrollAtBottom=!1,s.trigger(d)),m();let l=0,t=r.extraIndicators.length;for(;l=r.extraIndicators[l].element.offset().top],classes:[r.extraIndicators[l].class]});s.trigger(i)}}r.hijacking||s.on("load scroll resize",(function(){u()})),jQuery&&(jQuery.scrollDirection=o)}(jQuery); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..3795e91 --- /dev/null +++ b/package.json @@ -0,0 +1,6 @@ +{ + "devDependencies": { + "browser-sync": "^2.27.7", + "gulp": "^4.0.2" + } +} From 8213d3fca76e9f7b2d737306da6da989b0b11f93 Mon Sep 17 00:00:00 2001 From: phucbm Date: Tue, 8 Feb 2022 16:30:55 +0700 Subject: [PATCH 2/5] :recycle: remove $.extend(), replace scrollTop with pure JS solution --- jquery.scroll-direction.js | 90 +++++++++++++++++++------------------- 1 file changed, 46 insertions(+), 44 deletions(-) diff --git a/jquery.scroll-direction.js b/jquery.scroll-direction.js index 15cf205..72e0113 100644 --- a/jquery.scroll-direction.js +++ b/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,31 +62,33 @@ 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]); } } @@ -94,28 +96,28 @@ } // 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,17 +129,17 @@ 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; @@ -145,11 +147,11 @@ $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); \ No newline at end of file From 0ae9c24ebe63b0f24fb1f502c238b1b149d16c4f Mon Sep 17 00:00:00 2001 From: phucbm Date: Tue, 8 Feb 2022 16:40:41 +0700 Subject: [PATCH 3/5] :recycle: change load scroll resize events --- jquery.scroll-direction.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/jquery.scroll-direction.js b/jquery.scroll-direction.js index 72e0113..fc8d799 100644 --- a/jquery.scroll-direction.js +++ b/jquery.scroll-direction.js @@ -17,7 +17,7 @@ bottomOffset: () => 0, atBottomIsAtMiddle: true, indicator: true, - indicatorElement: $("body"), + indicatorElement: document.querySelector('body'), scrollUpClass: "scroll-up", scrollDownClass: "scroll-down", scrollAtTopClass: "scroll-top", @@ -87,16 +87,16 @@ for(i; i < l; i++){ if(indicators.values[i]){ - settings.indicatorElement.addClass(indicators.classes[i]); + settings.indicatorElement.classList.add(indicators.classes[i]); }else{ - settings.indicatorElement.removeClass(indicators.classes[i]); + settings.indicatorElement.classList.remove(indicators.classes[i]); } } } } // update - function update(){ + function update(e){ if(pluginActive){ // check scroll directions if(settings.scrollAmount() > lastScrollAmount && lastScrollAmount >= 0){ @@ -179,14 +179,18 @@ // update on window events if(!settings.hijacking){ - $w.on("load scroll resize", function(){ - // update values - update(); - }); + window.addEventListener('load', e => update(e)); + window.addEventListener('scroll', e => update(e)); + window.addEventListener('resize', e => update(e)); } + // for manual, jQuery-free + window.scrollDirection = obj; + // Only assign to jQuery.scrollDirection if jQuery is loaded if(jQuery){ - jQuery.scrollDirection = obj; + jQuery.scrollDirection = window.scrollDirection; } + + return window.scrollDirection; })(jQuery); \ No newline at end of file From b85f8a672e9e54301496d226bdb22c92ae1887d7 Mon Sep 17 00:00:00 2001 From: phucbm Date: Tue, 8 Feb 2022 16:56:53 +0700 Subject: [PATCH 4/5] :recycle: add native JS events --- index.html | 15 +++++----- jquery.scroll-direction.js | 57 ++++++++++++++++++++++++++------------ 2 files changed, 47 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index e002418..4c6426e 100644 --- a/index.html +++ b/index.html @@ -139,7 +139,7 @@

jQuery Scroll Direction Plugin

diff --git a/jquery.scroll-direction.js b/jquery.scroll-direction.js index fc8d799..628acff 100644 --- a/jquery.scroll-direction.js +++ b/jquery.scroll-direction.js @@ -11,7 +11,8 @@ let obj = {}, pluginActive = false, - $w = $(window), + hasJquery = typeof jQuery !== 'undefined', + $w = hasJquery ? $(window) : '', settings = { topOffset: () => 0, bottomOffset: () => 0, @@ -54,12 +55,24 @@ obj.isScrollAtBottom = false; // Events - let scrollDirection = $.Event("scrollDirection"), - scrollDown = $.Event("scrollDown"), - scrollUp = $.Event("scrollUp"), - scrollAtTop = $.Event("scrollAtTop"), - scrollAtMiddle = $.Event("scrollAtMiddle"), - scrollAtBottom = $.Event("scrollAtBottom"); + const scrollDirection = new Event("scrollDirection"), + scrollDown = new Event("scrollDown"), + scrollUp = new Event("scrollUp"), + scrollAtTop = new Event("scrollAtTop"), + scrollAtMiddle = new Event("scrollAtMiddle"), + scrollAtBottom = new Event("scrollAtBottom"); + + // jQuery support + let scrollDirectionJquery, scrollDownJquery, scrollUpJquery, scrollAtTopJquery, scrollAtMiddleJquery, + scrollAtBottomJquery; + if(hasJquery){ + scrollDirectionJquery = $.Event("scrollDirection"); + scrollDownJquery = $.Event("scrollDown"); + scrollUpJquery = $.Event("scrollUp"); + scrollAtTopJquery = $.Event("scrollAtTop"); + scrollAtMiddleJquery = $.Event("scrollAtMiddle"); + scrollAtBottomJquery = $.Event("scrollAtBottom"); + } // Indicator: add class to indicate the scrolling status function indicator(options){ @@ -104,25 +117,29 @@ obj.isScrollUp = false; obj.isScrollDown = true; - $w.trigger(scrollDown); + if(hasJquery) $w.trigger(scrollDownJquery); + document.dispatchEvent(scrollDown); }else if(settings.scrollAmount() < lastScrollAmount && lastScrollAmount >= 0){ // scroll up obj.isScrollUp = true; obj.isScrollDown = false; - $w.trigger(scrollUp); + if(hasJquery) $w.trigger(scrollUpJquery); + document.dispatchEvent(scrollUp); }else if(settings.scrollAmount() < 0){ // scroll up (elastic scroll with negative value) obj.isScrollUp = true; obj.isScrollDown = false; - $w.trigger(scrollUp); + if(hasJquery) $w.trigger(scrollUpJquery); + document.dispatchEvent(scrollUp); }else if(settings.scrollAmount() > settings.maxScrollAmount()){ // scroll down (elastic scroll with positive value) obj.isScrollUp = false; obj.isScrollDown = true; - $w.trigger(scrollDown); + if(hasJquery) $w.trigger(scrollDownJquery); + document.dispatchEvent(scrollDown); } // update the last position @@ -135,7 +152,8 @@ obj.isScrollAtMiddle = false; obj.isScrollAtBottom = false; - $w.trigger(scrollAtTop); + if(hasJquery) $w.trigger(scrollAtTopJquery); + document.dispatchEvent(scrollAtTop); }else if( settings.scrollAmount() >= settings.maxScrollAmount() - settings.bottomOffset() && settings.scrollAmount() <= settings.maxScrollAmount() @@ -145,11 +163,14 @@ obj.isScrollAtMiddle = false; obj.isScrollAtBottom = true; - $w.trigger(scrollAtBottom); + if(hasJquery) $w.trigger(scrollAtBottomJquery); + document.dispatchEvent(scrollAtBottom); if(settings.atBottomIsAtMiddle){ obj.isScrollAtMiddle = true; - $w.trigger(scrollAtMiddle); + + if(hasJquery) $w.trigger(scrollAtMiddleJquery); + document.dispatchEvent(scrollAtMiddle); } }else{ // at middle @@ -157,7 +178,8 @@ obj.isScrollAtMiddle = true; obj.isScrollAtBottom = false; - $w.trigger(scrollAtMiddle); + if(hasJquery) $w.trigger(scrollAtMiddleJquery); + document.dispatchEvent(scrollAtMiddle); } // Indicator @@ -173,7 +195,8 @@ }); } - $w.trigger(scrollDirection); + if(hasJquery) $w.trigger(scrollDirectionJquery); + document.dispatchEvent(scrollDirection); } } @@ -188,7 +211,7 @@ window.scrollDirection = obj; // Only assign to jQuery.scrollDirection if jQuery is loaded - if(jQuery){ + if(hasJquery){ jQuery.scrollDirection = window.scrollDirection; } From b6eb1bf9937369b763b106450bf6fac20c6c78ba Mon Sep 17 00:00:00 2001 From: phucbm Date: Tue, 8 Feb 2022 17:28:10 +0700 Subject: [PATCH 5/5] :recycle: release v2.0.0 --- README.md | 51 +++++++++++++++++++++++++++++--------- index.html | 7 +++--- jquery.scroll-direction.js | 4 +-- 3 files changed, 45 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index fe7b525..a57e613 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,8 @@
- - + + @@ -21,15 +21,19 @@ ### Download locally -You can [download the plugin directly from Github](https://raw.githubusercontent.com/phucbm/jquery-scroll-direction-plugin/main/jquery.scroll-direction.js). +You +can [download the plugin directly from Github](https://raw.githubusercontent.com/phucbm/jquery-scroll-direction-plugin/main/jquery.scroll-direction.js) +. ```html + ``` ### Using CDN -You can also browse for the latest version by visiting [Scroll Direction on jsDelivr](https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin/) +You can also browse for the latest version by +visiting [Scroll Direction on jsDelivr](https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin/) ```html @@ -53,6 +57,7 @@ $.scrollDirection.init(); ``` ```html + ``` @@ -70,7 +75,7 @@ $.scrollDirection.init({ }); // update Scroll Direction on Locomotive scroll event -scroller.on('scroll', function (obj) { +scroller.on('scroll', function(obj){ $.scrollDirection.update({ scrollAmount: () => obj.scroll.y, maxScrollAmount: () => obj.limit.y, @@ -108,34 +113,50 @@ $.scrollDirection.init({ ### Update ```js +// jQuery $.scrollDirection.update({ // update new options }); + +// Pure JS +window.scrollDirection.update({ + // update new options +}); ``` ### Events ```js +// jQuery // this event runs whenever you load, resize and scroll -$(window).on("scrollDirection", function () { - // do your job here +$(window).on("scrollDirection", function(){ + // do your job here }); // when you scroll up -$(window).on("scrollUp", function () {}); +$(window).on("scrollUp", function(){ +}); // when you scroll down -$(window).on("scrollDown", function () {}); +$(window).on("scrollDown", function(){ +}); // when you at the beginning of the page, you can increase the top zone using topOffset -$(window).on("scrollAtTop", function () {}); +$(window).on("scrollAtTop", function(){ +}); // when you in the middle of the page // this means the top and bottom zone are not visible in view port -$(window).on("scrollAtMiddle", function () {}); +$(window).on("scrollAtMiddle", function(){ +}); // when you touch the end of the page -$(window).on("scrollAtBottom", function () {}); +$(window).on("scrollAtBottom", function(){ +}); + +// Pure JS +document.addEventListener("scrollDirection", () => { +}); ``` ### APIs @@ -149,9 +170,15 @@ You can also check the current scroll direction/position using these provided AP - `$.scrollDirection.isScrollAtBottom` ```js +// jQuery if($.scrollDirection.isScrollUp){ // do something } + +// Pure JS +if(window.scrollDirection.isScrollUp){ + // do something +} ``` ## Deployment diff --git a/index.html b/index.html index 4c6426e..61e7f95 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ - Title + + Scroll Direction