angular-butter-scroll

angular-butter-scroll

A plug and play angular directive for buttery smooth, high FPS scrolling.

Why?

Browsers seriously optimize scroll operations, making scrolling buttery smooth by default. But if you scroll over a lot of elements with :hover styles, browsers have to paint and have long, unoptimized composite cycles as you scroll. These operations block the UI thread and kill FPS, making scrolly laggy and jittery.

Install

NPM

bower install angular-butter-scroll

Bower

npm install angular-butter-scroll

Usage

JS

angular
.module('foo', ['turn/angularButterScroll'])
...

HTML

<div angular-butter-scroll> ... </div>

CSS

.disable-pointer-events * {
  pointer-events: none !important;
}

How does it work?

Angular-butter-scroll works by disabling pointer events while scrolling, and re-enabling them when the user is done scrolling. It's a simple hack based on this technique.

Running the demo

Open demo/index.html in a browser

Running the tests

bower install
npm install
grunt test

Hacking it

bower install
npm install
grunt watch