├── .gitignore ├── .editorconfig ├── bower.json ├── package.json ├── src ├── utils.js └── main.js ├── README.md ├── LICENSE ├── gulpfile.js └── dist └── 60fps-scroll.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/main.js 3 | dist/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 -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 }; -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | }); -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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