overflow-color [![Build Status][travis badge]][travis link] ![0 dependency][dependency badge] ![npm bundle size (minified + gzip)][size badge]

![Demo][demo]

Try it on your smartphone or with a trackpad on MacOS: [git.io/overflow][demo]
([https://dimitrinicolas.github.io/overflow-color/][demo])

A simple script that automatically switches CSS html background-color
according to scroll position.

This package is on npm

``console
npm i overflow-color
`

Usage

You simply must add the browser minified script
dist/overflow-color.umd.min.js and the two
attributes data-oc-top and data-oc-bottom to your body tag.

`html




`

You can use the shortcut data-oc by separating the two values with a comma.

`html

`

$3

You can import this package with a simple require or import.

`javascript
require('overflow-color');
// with ES6+
import 'overflow-color';
`

You don't have anything else to do, the script is automatically launched when
the DOM content is loaded.

#### Manually re-check scroll position

When you update body's overflow color attribute or make a huge change to the DOM
(e.g. changing page with Angular) and that the vertical scroll position stayed
at the top, the new document height may be smaller than the previous one, and
overflow-color should set the overflow color to the bottom one, but it has not
be called by scroll event. In this specific case, you can use the default
exported function updateOverflowColor:

`javascript
import updateOverflowColor from 'overflow-color';

/* Change DOM or body's overflow color attribute /

updateOverflowColor();
`

CSS tricks, Behind the Scenes

This library will wrap all the body content inside a