Automatically switch CSS html background-color to bring a smooth user experience
Add the data-oc-outside attribute to any body's immediate children that you don't want to be included into the data-oc-wrap element at DOM content load.
The default exported function is now update and check for attribute and scroll change
Improved performance by passively listening to scroll event
Improved performance by throttling the scroll event listener through requestAnimationFrame.
Now default exporting a force checkScroll function to use when making huge change to the DOM, see Readme for more informations, example:
import checkScroll from 'overflow-color';
/** Change DOM */
checkScroll();
Some simplifications have been made to the code.
The style tag setting the html background color is now added once to the DOM rather than being removed and recreated for each overflow color change.
Now bundling into 3 modules using Rollup :
main overflow-color.cjs.js as a standard node modulemodule overflow-color.esm.js as an ES6 node modulebrowser overflow-color.umd.js and overflow-color.umd.min.js as a basic embeddable library for browserNothing if you use a module bundler like Webpack or Rollup, by updating overflow-color to 2.1.2, it will automatically choose the most suitable module.
Switching to dist/overflow-color.umd.min.js if you manualy update and embed the library in your webpages : <script src="overflow-color.umd.min.js" async></script.
It will now test if document.readyState is equal to interactive, so the script can now be loaded async.
Added a shortcut data-oc for data-oc-top and data-oc-bottom combined. This new version is backwards-compatible.
For example, this:
<body data-oc-top="red" data-oc-bottom="blue">
can be shortened to:
<body data-oc="red,blue">
Bugfix on Firefox
Complete rework and bugfixes. The library is now published on npm.