diff --git a/README.md b/README.md index 2283fb4..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,7 +170,27 @@ 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 + +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..61e7f95 --- /dev/null +++ b/index.html @@ -0,0 +1,183 @@ + + + + + + + Scroll Direction + + + + + +
+

Scroll Direction

+
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.js b/jquery.scroll-direction.js index 15cf205..d70a70a 100644 --- a/jquery.scroll-direction.js +++ b/jquery.scroll-direction.js @@ -1,47 +1,48 @@ /** - * jQuery Scroll Direction Plugin 1.1.0 + * jQuery Scroll Direction Plugin 2.0.0 * https://github.com/phucbm/jquery-scroll-direction-plugin * * Released under the MIT license - * Date: 2021-06-20 + * Date: 2022-02-08 */ -(function ($) { +(function($){ "use strict"; let obj = {}, pluginActive = false, - $w = $(window), + hasJquery = typeof jQuery !== 'undefined', + $w = hasJquery ? $(window) : '', settings = { topOffset: () => 0, bottomOffset: () => 0, atBottomIsAtMiddle: true, indicator: true, - indicatorElement: $("body"), + indicatorElement: document.querySelector('body'), scrollUpClass: "scroll-up", scrollDownClass: "scroll-down", scrollAtTopClass: "scroll-top", 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(); } }; @@ -54,108 +55,131 @@ 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) { - 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]) { - settings.indicatorElement.addClass(indicators.classes[i]); - } else { - settings.indicatorElement.removeClass(indicators.classes[i]); + for(i; i < l; i++){ + if(indicators.values[i]){ + settings.indicatorElement.classList.add(indicators.classes[i]); + }else{ + settings.indicatorElement.classList.remove(indicators.classes[i]); } } } } // update - function update() { - if (pluginActive) { + function update(e){ + 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) { + 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); - } else if (settings.scrollAmount() < 0) { + 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); - } else if (settings.scrollAmount() > settings.maxScrollAmount()) { + 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 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 ( + if(hasJquery) $w.trigger(scrollAtTopJquery); + document.dispatchEvent(scrollAtTop); + }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(hasJquery) $w.trigger(scrollAtBottomJquery); + document.dispatchEvent(scrollAtBottom); - if (settings.atBottomIsAtMiddle) { + if(settings.atBottomIsAtMiddle){ obj.isScrollAtMiddle = true; - $w.trigger(scrollAtMiddle); + + if(hasJquery) $w.trigger(scrollAtMiddleJquery); + document.dispatchEvent(scrollAtMiddle); } - } else { + }else{ // at middle obj.isScrollAtTop = false; obj.isScrollAtMiddle = true; obj.isScrollAtBottom = false; - $w.trigger(scrollAtMiddle); + if(hasJquery) $w.trigger(scrollAtMiddleJquery); + document.dispatchEvent(scrollAtMiddle); } // Indicator @@ -164,27 +188,32 @@ // 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"]] }); } - $w.trigger(scrollDirection); + if(hasJquery) $w.trigger(scrollDirectionJquery); + document.dispatchEvent(scrollDirection); } } // update on window events - if (!settings.hijacking) { - $w.on("load scroll resize", function () { - // update values - update(); - }); + if(!settings.hijacking){ + 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; + if(hasJquery){ + jQuery.scrollDirection = window.scrollDirection; } + + return window.scrollDirection; })(jQuery); \ 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" + } +}