├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── dist
    └── 60fps-scroll.js
├── gulpfile.js
├── package.json
└── src
    ├── main.js
    └── utils.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist/main.js
3 | dist/utils.js


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Ryan Seddon
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Deprecated!
 2 | 
 3 | ## Why?
 4 | 
 5 | Chrome has released a fix that stops mouse events from firing when scrolling so you don't need this lib any more. See Chrome [status page](https://www.chromestatus.com/feature/5697181675683840).
 6 | 
 7 | 
 8 | 60fps-scroll
 9 | ============
10 | 
11 | A little library that *could* make your site scroll faster.
12 | 
13 | ## Bower
14 | 
15 | 60fps-scroll can be installed from [Bower](http://twitter.github.com/bower/) using the following command:
16 | 
17 | ```bash
18 | $ bower install 60fps-scroll
19 | ```
20 | 
21 | ## Usage
22 | 
23 | To use just include at the bottom of your page or bundle with your scripts in a build process. The library will automatically handle everything else.
24 | 
25 | ## Context
26 | 
27 | For some context on why you may want to use this checkout my article: [A follow up to obtaining 60fps scrolling performance](http://www.thecssninja.com/javascript/follow-up-60fps-scroll)
28 | 
29 | ## License
30 | 
31 | Copyright 2013, Ryan Seddon  
32 | This content is released under the MIT license  
33 | http://ryanseddon.mit-license.org
34 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "60fps-scroll",
 3 |   "version": "0.1.1",
 4 |   "homepage": "https://github.com/ryanseddon/60fps-scroll",
 5 |   "authors": [
 6 |     "Ryan Seddon"
 7 |   ],
 8 |   "description": "A little library that *could* make your site scroll faster",
 9 |   "main": "dist/60fps-scroll.js",
10 |   "keywords": [
11 |     "60fps",
12 |     "Scroll performance"
13 |   ],
14 |   "license": "MIT",
15 |   "ignore": [
16 |     "**/.*",
17 |     "node_modules",
18 |     "bower_components",
19 |     "test",
20 |     "tests",
21 |     "src",
22 |     "dist/main.js",
23 |     "dist/utils.js"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/dist/60fps-scroll.js:
--------------------------------------------------------------------------------
 1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 2 | "use strict";
 3 | var support = require("./utils").support;
 4 | var dispatchClick = require("./utils").dispatchClick;
 5 | 
 6 | if (typeof document.addEventListener !== 'function') {
 7 |     return;
 8 | }
 9 | 
10 | document.addEventListener('DOMContentLoaded', function() {
11 |     if(!support) {
12 |         return;
13 |     }
14 | 
15 |     var cover = document.createElement('div'),
16 |         body = document.body,
17 |         coverStyle = cover.style,
18 |         scrollStarted = false,
19 |         timer,
20 |         clicked = false,
21 |         pos = { x: 0, y: 0 };
22 | 
23 |     coverStyle.cssText = [
24 |         '-webkit-transform: translate3d(0,0,0);',
25 |         'transform: translate3d(0,0,0);',
26 |         'position: fixed;',
27 |         'top: 0;',
28 |         'right: 0;',
29 |         'left: 0;',
30 |         'bottom: 0;',
31 |         'opacity: 0;',
32 |         'z-index: 2147483647;',
33 |         'pointer-events: none'
34 |     ].join('');
35 |     body.appendChild(cover);
36 | 
37 |     window.addEventListener('scroll', function scroll() {
38 |         if(!scrollStarted) {
39 |             coverStyle.pointerEvents = 'auto';
40 |             scrollStarted = true;
41 |         }
42 |         clearTimeout(timer);
43 | 
44 |         timer = setTimeout(function(){
45 |             coverStyle.pointerEvents = 'none';
46 |             scrollStarted = false;
47 |             if(clicked) {
48 |                 dispatchClick(pos);
49 |                 clicked = false;
50 |             }
51 |         },500);
52 |     }, false);
53 | 
54 |     // capture all clicks and store x, y coords for later
55 |     document.addEventListener('click', function clickCatcher(event) {
56 |         if(event.target === cover && !event.synthetic) {
57 |             pos.x = event.clientX;
58 |             pos.y = event.clientY;
59 |             clicked = true;
60 |         }
61 |     }, false);
62 | }, false);
63 | },{"./utils":2}],2:[function(require,module,exports){
64 | "use strict";
65 | var support = (function support() {
66 |     var element = document.createElement('x');
67 |     element.style.cssText = 'pointer-events:auto';
68 |     return element.style.pointerEvents === 'auto';
69 | }());
70 | 
71 | function dispatchClick(coords) {
72 |     var event = document.createEvent('MouseEvent'),
73 |         elem = document.elementFromPoint(coords.x, coords.y);
74 | 
75 |     event.initMouseEvent(
76 |         'click',
77 |         true /* bubble */, true /* cancelable */,
78 |         window, null,
79 |         coords.x, coords.y, 0, 0, /* coordinates */
80 |         false, false, false, false, /* modifier keys */
81 |         0 /*left*/, null
82 |     );
83 |     event.synthetic = true;
84 | 
85 |     elem.dispatchEvent(event);
86 | }
87 | 
88 | exports.support = support;
89 | exports.dispatchClick = dispatchClick;
90 | },{}]},{},[1])
91 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var browserify = require('gulp-browserify');
 3 | var through = require('through');
 4 | var Compiler = require('es6-module-transpiler').Compiler;
 5 | var concat = require('gulp-concat');
 6 | 
 7 | // I have a gulp task gulp-es6-module-transpiler but I dont know how
 8 | // to use it as I'm not sure how to access the buffer from the task so
 9 | // browserifies transform task can work correctly? Can you help?
10 | function compile(opts) {
11 |     var buf = '';
12 |     return function () {
13 |         return through(write, end);
14 |     };
15 | 
16 |     function write(data) {
17 |         buf += data;
18 |     }
19 | 
20 |     function end() {
21 |         this.queue((new Compiler(buf, '', opts)).toCJS());
22 |         this.queue(null);
23 |         buf = '';
24 |     }
25 | }
26 | 
27 | gulp.task('build', function() {
28 |     gulp.src('src/main.js')
29 |         .pipe(browserify({
30 |             transform : [compile()]
31 |         }))
32 |         .pipe(concat('60fps-scroll.js'))
33 |         .pipe(gulp.dest('./dist'));
34 | });
35 | 
36 | // The default task (called when you run `gulp`)
37 | gulp.task('default', function() {
38 |   gulp.run('build');
39 | 
40 |   // Watch files and run tasks if they change
41 |   gulp.watch('src/*.js', function(event) {
42 |     gulp.run('build');
43 |   });
44 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "60fps-scroll",
 3 |   "version": "0.1.0",
 4 |   "description": "A little library that *could* make your site scroll faster",
 5 |   "main": "dist/60fps-scroll.js",
 6 |   "scripts": {
 7 |     "test": "grunt"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git://github.com/ryanseddon/60fps-scroll.git"
12 |   },
13 |   "author": "Ryan Seddon",
14 |   "license": "MIT",
15 |   "readmeFilename": "README.md",
16 |   "gitHead": "ba8916381d8ffe01e4735edbd40f856187107c87",
17 |   "devDependencies": {
18 |     "gulp": "~3.1.4",
19 |     "gulp-browserify": "~0.2.2",
20 |     "gulp-concat": "~2.1.4",
21 |     "gulp-uglify": "~0.1.0"
22 |   },
23 |   "dependencies": {}
24 | }
25 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { support, dispatchClick } from './utils';
 2 | 
 3 | if (typeof document.addEventListener !== 'function') {
 4 |     return;
 5 | }
 6 | 
 7 | document.addEventListener('DOMContentLoaded', function() {
 8 |     if(!support) {
 9 |         return;
10 |     }
11 | 
12 |     var cover = document.createElement('div'),
13 |         body = document.body,
14 |         coverStyle = cover.style,
15 |         scrollStarted = false,
16 |         timer,
17 |         clicked = false,
18 |         pos = { x: 0, y: 0 };
19 | 
20 |     coverStyle.cssText = [
21 |         '-webkit-transform: translate3d(0,0,0);',
22 |         'transform: translate3d(0,0,0);',
23 |         'position: fixed;',
24 |         'top: 0;',
25 |         'right: 0;',
26 |         'left: 0;',
27 |         'bottom: 0;',
28 |         'opacity: 0;',
29 |         'z-index: 2147483647;',
30 |         'pointer-events: none'
31 |     ].join('');
32 |     body.appendChild(cover);
33 | 
34 |     window.addEventListener('scroll', function scroll() {
35 |         if(!scrollStarted) {
36 |             coverStyle.pointerEvents = 'auto';
37 |             scrollStarted = true;
38 |         }
39 |         clearTimeout(timer);
40 | 
41 |         timer = setTimeout(function(){
42 |             coverStyle.pointerEvents = 'none';
43 |             scrollStarted = false;
44 |             if(clicked) {
45 |                 dispatchClick(pos);
46 |                 clicked = false;
47 |             }
48 |         },500);
49 |     }, false);
50 | 
51 |     // capture all clicks and store x, y coords for later
52 |     document.addEventListener('click', function clickCatcher(event) {
53 |         if(event.target === cover && !event.synthetic) {
54 |             pos.x = event.clientX;
55 |             pos.y = event.clientY;
56 |             clicked = true;
57 |         }
58 |     }, false);
59 | }, false);
60 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | var support = (function support() {
 2 |     var element = document.createElement('x');
 3 |     element.style.cssText = 'pointer-events:auto';
 4 |     return element.style.pointerEvents === 'auto';
 5 | }());
 6 | 
 7 | function dispatchClick(coords) {
 8 |     var event = document.createEvent('MouseEvent'),
 9 |         elem = document.elementFromPoint(coords.x, coords.y);
10 | 
11 |     event.initMouseEvent(
12 |         'click',
13 |         true /* bubble */, true /* cancelable */,
14 |         window, null,
15 |         coords.x, coords.y, 0, 0, /* coordinates */
16 |         false, false, false, false, /* modifier keys */
17 |         0 /*left*/, null
18 |     );
19 |     event.synthetic = true;
20 | 
21 |     elem.dispatchEvent(event);
22 | }
23 | 
24 | export { support, dispatchClick };


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