Try it on your smartphone or with a trackpad on MacOS: git.io/overflow (https://dimitrinicolas.github.io/overflow-color/)
A simple script that automatically switches CSS html background-color
according to scroll position.
This package is on npm
$ npm i overflow-colorYou 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.
<body data-oc-top="red" data-oc-bottom="blue">
<!-- ... -->
<script src="dist/overflow-color.umd.min.js" async></script>
</body>You can use the shortcut data-oc by separating the two values with a comma.
<body data-oc="red,blue">You can import this package with a simple require or import.
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.
When you 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 checkScroll:
import checkScroll from 'overflow-color';
/** Change DOM */
checkScroll();This library will wrap all the body content inside a <div data-oc-wrap>.
Then it set to the wrapper the same background as the body, and set body's
background to transparent.
when the document is loaded:
<!doctype html>
<head>
<!-- ... -->
<style>
/* your style */
body {
background: lightgrey;
}
</style>
<style>
/* style added by the script */
html { background: blue; }
</style>
</head>
<body data-oc="red,blue" style="background: transparent; /* style added by the script */ ">
<!-- wrapper added by the script -->
<div data-oc-wrap style="background: lightgrey;">
<!-- ... your body's childs -->
<script src="dist/overflow-color.umd.min.js" async></script>
</div>
</body>You can read the Designer News discussion about the different tried tricks.
I successfully tested this library, on:
Mac OS High Sierra: Safari v11, Google Chrome v67 and Opera v51
iOS 11: Safari, Google Chrome v68, Firefox 12 and Microsoft Edge v42
Unfortunately, Firefox on MacOS and Opera Mini on iOS doesn't show the over-scroll color even without this library.
This library pass an E2E test through Chrome with Cypress.
Compile with Rollup:
$ npm run buildBuild and test with Cypress:
$ npm testThis project is licensed under the MIT license.