├── .gitignore
├── test
    ├── support
    │   └── boot.js
    └── jquery-during-scroll_test.coffee
├── bower.json
├── package.json
├── karma.conf.js
├── source
    └── during-scroll.js
└── Readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | coverage
4 | 


--------------------------------------------------------------------------------
/test/support/boot.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | window.define = jasmine.createSpy('define');
4 | window.define.amd = true;
5 | 
6 | window.module = jasmine.createSpy('module');
7 | 
8 | window.jQuery = jasmine.createSpy('jQuery');
9 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-during-scroll",
 3 |   "main": "source/during-scroll.js",
 4 |   "version": "1.1.0",
 5 |   "authors": [
 6 |     "Jack <jack@ofspades.com>"
 7 |   ],
 8 |   "description": "A plugin to handle callbacks during and after a scroll event.",
 9 |   "moduleType": [
10 |     "amd",
11 |     "globals",
12 |     "node"
13 |   ],
14 |   "keywords": [
15 |     "jQuery",
16 |     "scroll",
17 |     "onscroll"
18 |   ],
19 |   "license": "Creative Commons Attribution-ShareAlike 4.0 International",
20 |   "homepage": "https://jack.ofspades.com/jquery-during-scroll/",
21 |   "ignore": [
22 |     "**/.*",
23 |     "node_modules",
24 |     "bower_components",
25 |     "test",
26 |     "tests"
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-during-scroll",
 3 |   "version": "1.1.0",
 4 |   "description": "A plugin to handle callbacks during and after a scroll event.",
 5 |   "main": "source/during-scroll.js",
 6 |   "directories": {
 7 |     "test": "karma"
 8 |   },
 9 |   "scripts": {
10 |     "test": "./node_modules/karma/bin/karma start && CODECLIMATE_REPO_TOKEN=d8038d0e98ed952fe1894c601075aba6eee01c5ab7d0e4f82a93babfc7689c8a codeclimate < coverage/report-lcov/lcov.info"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/jacopotarantino/jquery-during-scroll.git"
15 |   },
16 |   "keywords": [
17 |     "jQuery",
18 |     "scroll",
19 |     "onscroll"
20 |   ],
21 |   "author": "Jack <jack@ofspades.com>",
22 |   "license": "Creative Commons Attribution-ShareAlike 4.0 International",
23 |   "bugs": {
24 |     "url": "https://github.com/jacopotarantino/jquery-during-scroll/issues"
25 |   },
26 |   "homepage": "https://github.com/jacopotarantino/jquery-during-scroll",
27 |   "devDependencies": {
28 |     "codeclimate-test-reporter": "0.0.4",
29 |     "jasmine-core": "^2.2.0",
30 |     "karma": "^0.12.31",
31 |     "karma-chrome-launcher": "^0.1.7",
32 |     "karma-coffee-preprocessor": "^0.2.1",
33 |     "karma-coverage": "^0.2.7",
34 |     "karma-jasmine": "^0.3.5"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(config) {
 2 |   config.set({
 3 | 
 4 |     // base path, that will be used to resolve files and exclude
 5 |     basePath: './',
 6 | 
 7 |     // frameworks to use
 8 |     frameworks: ['jasmine'],
 9 | 
10 |     // list of files / patterns to load in the browser
11 |     files: [
12 |       'test/support/boot.js',
13 |       'source/during-scroll.js',
14 |       'test/jquery-during-scroll_test.coffee'
15 |     ],
16 | 
17 |     // test results reporter to use
18 |     reporters: ['progress', 'dots', 'coverage'],
19 | 
20 |     preprocessors: {
21 |       // source files, that you wanna generate coverage for
22 |       // do not include tests or libraries
23 |       // (these files will be instrumented by Istanbul)
24 |       'source/during-scroll.js': ['coverage'],
25 |       '**/*.coffee': ['coffee']
26 |     },
27 | 
28 |     coffeePreprocessor: {
29 |       // options passed to the coffee compiler
30 |       options: {
31 |         bare: true,
32 |         sourceMap: true
33 |       },
34 |       // transforming the filenames
35 |       transformPath: function(path) {
36 |         return path.replace(/\.coffee$/, '.js');
37 |       }
38 |     },
39 | 
40 |     // optionally, configure the reporter
41 |     coverageReporter: {
42 |       type : 'html',
43 |       dir: 'coverage/',
44 |       reporters: [
45 |         {
46 |           type : 'html',
47 |           subdir : 'report-html'
48 |         },
49 |         {
50 |           type : 'lcov',
51 |           subdir : 'report-lcov'
52 |         }
53 |       ]
54 |     },
55 | 
56 |     // web server port
57 |     port: 9876,
58 | 
59 |     // enable / disable colors in the output (reporters and logs)
60 |     colors: true,
61 | 
62 |     // level of logging
63 |     logLevel: config.LOG_INFO,
64 | 
65 |     // enable / disable watching file and executing tests whenever any file changes
66 |     autoWatch: true,
67 | 
68 |     // Start these browsers
69 |     browsers: ['Chrome'],
70 | 
71 |     // If browser does not capture in given timeout [ms], kill it
72 |     captureTimeout: 60000,
73 | 
74 |     captureConsole: false,
75 | 
76 |     hostname: 'localhost',
77 | 
78 |     // Continuous Integration mode
79 |     // if true, it capture browsers, run tests and exit
80 |     singleRun: true
81 |   });
82 | };
83 | 


--------------------------------------------------------------------------------
/source/during-scroll.js:
--------------------------------------------------------------------------------
 1 | (function(window) {
 2 |   'use strict';
 3 |   /**
 4 |    * @module duringScroll
 5 |    * @param {Object} opts - a hash of optional overrides.
 6 |    * @returns {Number} - a reference to the interval invoked.
 7 |    */
 8 |   function duringScroll(opts) {
 9 |     var top_offset = document.body.scrollTop,
10 |         state = 'not scrolling',
11 |         noop = function() {},
12 |         default_options = {
13 |           interval: 60,
14 |           always: noop,
15 |           scrollStart: noop,
16 |           duringScroll: noop,
17 |           afterScroll: noop
18 |         },
19 |         options = merge_hashes(default_options, opts);
20 | 
21 |     function handle_scrolling(scrollStart, duringScroll, afterScroll) {
22 |       if(state === 'not scrolling' && top_offset !== document.body.scrollTop) {
23 |         // we've started scrolling
24 |         top_offset = document.body.scrollTop;
25 |         state = 'scrolling';
26 |         scrollStart();
27 | 
28 |       } else if(state === 'scrolling' && top_offset !== document.body.scrollTop) {
29 |         // we're still scrolling
30 |         top_offset = document.body.scrollTop;
31 |         duringScroll();
32 | 
33 |       } else if(state === 'scrolling' && top_offset === document.body.scrollTop) {
34 |         // we've stopped scrolling
35 |         state = 'not scrolling';
36 |         afterScroll();
37 |       }
38 |     }
39 | 
40 |     return setInterval(function() {
41 |       options.always();
42 |       handle_scrolling(options.scrollStart, options.duringScroll, options.afterScroll);
43 | 
44 |     }, options.interval);
45 |   }
46 | 
47 |   function merge_hashes() {
48 |     var new_hash = {};
49 | 
50 |     Array.prototype.forEach.call(arguments, function(obj) {
51 |       Object.keys(obj).forEach(function(property, index) {
52 |         new_hash[property] = obj[property];
53 |       });
54 |     });
55 | 
56 |     return new_hash;
57 |   }
58 | 
59 |   /**
60 |    * @description export the module based on environment.
61 |    */
62 |   var hasDefine = typeof window.define === 'function' && window.define.amd,
63 |       hasExports = typeof window.module !== 'undefined',
64 |       hasJquery = typeof window.jQuery !== 'undefined';
65 | 
66 |   if( hasDefine ) {
67 |     window.define(function() {
68 |       return {
69 |         duringScroll: duringScroll
70 |       };
71 |     });
72 |   }
73 | 
74 |   if( hasExports ) {
75 |     window.module.exports = duringScroll;
76 |   }
77 | 
78 |   if( hasJquery ) {
79 |     window.jQuery.duringScroll = duringScroll;
80 |   }
81 | 
82 |   if( !hasDefine && !hasExports && !hasJquery ) {
83 |     window.duringScroll = duringScroll;
84 |   }
85 | 
86 | })(window);
87 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
  1 | # jQuery During Scroll
  2 | 
  3 | A script to execute arbitrary code when a user starts to scroll, during the scroll and after a scroll has completed. This is different from the default browser and jQuery behavior in that it treats the entire scroll action as one long event instead of executing hundreds of times during a single scroll action.
  4 | 
  5 | [![Code Climate](https://codeclimate.com/github/jacopotarantino/jquery-during-scroll/badges/gpa.svg)](https://codeclimate.com/github/jacopotarantino/jquery-during-scroll)
  6 | 
  7 | [![Test Coverage](https://codeclimate.com/github/jacopotarantino/jquery-during-scroll/badges/coverage.svg)](https://codeclimate.com/github/jacopotarantino/jquery-during-scroll)
  8 | 
  9 | 
 10 | ## Installation
 11 | 
 12 | While the plugin is titled as though it's just a jQuery plugin, it is available in many formats. The plugin exposes itself as an AMD, CommonJS and jQuery plugin and exposes itself as a global "duringScroll" if none of those are found.
 13 | 
 14 | Include the script after jQuery and any other dependencies(such as requirejs) if you want the plugin to bind to them instead of the global context.
 15 | 
 16 | ### Via Bower
 17 | 
 18 | ```bash
 19 | bower install --save jquery-during-scroll
 20 | ```
 21 | 
 22 | ### Manually
 23 | 
 24 | Copy the file `source/during-scroll.js` into your project and reference it in a `<script>` tag at the end of the `<body>` tag in your HTML.
 25 | 
 26 | 
 27 | ## API
 28 | 
 29 | Below is an example usage that has all the default options:
 30 | 
 31 | ```javascript
 32 | var scrollInterval = $.duringScroll({
 33 |   interval: 60,
 34 |   always: function() {},
 35 |   scrollStart: function() {},
 36 |   duringScroll: function() {},
 37 |   afterScroll: function() {}
 38 | });
 39 | ```
 40 | 
 41 | The function returns a reference to the interval instance so that you can kill it if need be. An example assuming you called the method as above and stored the instance in a `scrollInterval` variable:
 42 | 
 43 | ```javascript
 44 | $('body').on('click', function() {
 45 |   clearInterval(scrollInterval);
 46 | });
 47 | ```
 48 | 
 49 | 
 50 | ### Options
 51 | 
 52 | #### interval *Number*
 53 | 
 54 | Defines how often we check if the user is still scrolling. It's necessary to use an interval instead of listening for the scroll event because the latter has a major performance impact. I find that around 60ms interval reliably tracks user interactions.
 55 | 
 56 | #### always *Function*
 57 | 
 58 | A callback to execute at every single `interval` invocation.
 59 | 
 60 | #### scrollStart *Function*
 61 | 
 62 | A callback to execute when we detect the user has started scrolling.
 63 | 
 64 | #### duringScroll *Function*
 65 | 
 66 | A callback to execute every `interval` milliseconds while the user is scrolling.
 67 | 
 68 | #### afterScroll *Function*
 69 | 
 70 | A callback to execute when we've detected the user is no longer scrolling.
 71 | 
 72 | 
 73 | ## Tests
 74 | 
 75 | Tests are in the `test` folder and run on karma + jasmine.
 76 | 
 77 | ### Requirements
 78 | 
 79 | * node
 80 | * npm
 81 | * Chrome
 82 | 
 83 | ### Running
 84 | 
 85 | Run the command `npm install` from the terminal to get all required packages then run `npm test` to run the test suite.
 86 | 
 87 | Note that the default test command reports code coverage to Code Climate. Run `karma` on its own if you wish to avoid this behavior.
 88 | 
 89 | 
 90 | ## License
 91 | 
 92 | This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/deed.en_US.
 93 | 
 94 | 
 95 | ## Contributing
 96 | 
 97 | * Fork the repo
 98 | * Write your tests
 99 | * Make the tests pass
100 | * Commit your changes
101 | * Open a pull request on this repository.
102 | 


--------------------------------------------------------------------------------
/test/jquery-during-scroll_test.coffee:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | describe 'module duringScroll', ->
  4 |   it 'sanity check', ->
  5 |     expect( true ).toBe true
  6 | 
  7 |   it 'returns an interval reference', ->
  8 |     reference = jQuery.duringScroll({})
  9 |     expect( typeof reference ).toBe 'number'
 10 |     clearInterval(reference)
 11 | 
 12 |   describe 'when AMD modules are present', ->
 13 |     it 'exposes itself as an AMD module', ->
 14 |       expect( window.define ).toHaveBeenCalled()
 15 | 
 16 |   describe 'when CommonJS modules are present', ->
 17 |     it 'exposes itself as a CommonJS module', ->
 18 |       expect( window.module.exports ).toBeDefined()
 19 | 
 20 |   describe 'when jQuery is defined', ->
 21 |     it 'exposes itself in the jQuery namespace', ->
 22 |       expect( jQuery.duringScroll ).toBeDefined()
 23 | 
 24 |   describe 'when any other module systems are detected', ->
 25 |     it 'does not expose itself globally', ->
 26 |       expect( typeof window.duringScroll ).toBe 'undefined'
 27 | 
 28 | 
 29 |   describe 'API options', ->
 30 |     beforeEach ->
 31 |       jasmine.clock().install()
 32 | 
 33 |     afterEach ->
 34 |       jasmine.clock().uninstall()
 35 | 
 36 |     describe '#interval', ->
 37 |       it 'alters the frequency at which the script is invoked', ->
 38 |         spy = jasmine.createSpyObj('spy', ['fakeHandler'])
 39 |         options =
 40 |           always: spy.fakeHandler,
 41 |           interval: 200
 42 |         reference = jQuery.duringScroll options
 43 | 
 44 |         jasmine.clock().tick(1050)
 45 | 
 46 |         clearInterval(reference)
 47 |         expect( spy.fakeHandler.calls.count() ).toBe 5
 48 | 
 49 |     describe '#always', ->
 50 |       it 'gets invoked every interval no matter what', ->
 51 |         spy = jasmine.createSpyObj('spy', ['fakeHandler'])
 52 |         options =
 53 |           always: spy.fakeHandler,
 54 |           interval: 200
 55 |         reference = jQuery.duringScroll options
 56 | 
 57 |         jasmine.clock().tick(450)
 58 | 
 59 |         clearInterval(reference)
 60 |         expect( spy.fakeHandler.calls.count() ).toBe 2
 61 | 
 62 |     describe '#scrollStart', ->
 63 |       it 'only gets called when the user starts scrolling', ->
 64 |         spy = jasmine.createSpyObj('spy', ['fakeHandler'])
 65 |         options =
 66 |           scrollStart: spy.fakeHandler
 67 |         reference = jQuery.duringScroll options
 68 | 
 69 |         jasmine.clock().tick(450)
 70 | 
 71 |         expect( spy.fakeHandler.calls.count() ).toBe 0
 72 |         document.body.scrollTop = 150
 73 | 
 74 |         jasmine.clock().tick(200)
 75 | 
 76 |         clearInterval(reference)
 77 |         expect( spy.fakeHandler.calls.count() ).toBe 0
 78 | 
 79 |     describe '#duringScroll', ->
 80 |       it 'executes every interval while the user is scrolling', ->
 81 |         document.body.style.height = '5000px'
 82 | 
 83 |         spy = jasmine.createSpyObj('spy', ['fakeHandler'])
 84 |         options =
 85 |           duringScroll: spy.fakeHandler
 86 |         reference = jQuery.duringScroll options
 87 | 
 88 |         test_reference = setInterval ->
 89 |           document.body.scrollTop = document.body.scrollTop + 5
 90 |         , 5
 91 | 
 92 |         jasmine.clock().tick(290)
 93 | 
 94 |         clearInterval(test_reference)
 95 |         expect( spy.fakeHandler.calls.count() ).toBe 3
 96 | 
 97 |         # callback will get called one more time
 98 |         jasmine.clock().tick(100)
 99 | 
100 |         spy.fakeHandler.calls.reset()
101 | 
102 |         jasmine.clock().tick(200)
103 | 
104 |         clearInterval(reference)
105 |         expect( spy.fakeHandler.calls.count() ).toBe 0
106 | 
107 |     describe '#afterScroll', ->
108 |       it 'executes only when the user has stopped scrolling', ->
109 |         document.body.style.height = '5000px'
110 | 
111 |         spy = jasmine.createSpyObj('spy', ['fakeHandler'])
112 |         options =
113 |           afterScroll: spy.fakeHandler
114 |         reference = jQuery.duringScroll options
115 | 
116 |         test_reference = setInterval ->
117 |           document.body.scrollTop = document.body.scrollTop + 5
118 |         , 5
119 | 
120 |         jasmine.clock().tick(290)
121 | 
122 |         expect( spy.fakeHandler.calls.count() ).toBe 0
123 |         clearInterval(test_reference)
124 | 
125 |         jasmine.clock().tick(200)
126 | 
127 |         clearInterval(reference)
128 |         expect( spy.fakeHandler.calls.count() ).toBe 1
129 | 


--------------------------------------------------------------------------------