npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

overflow-color

v2.3.0

Published

Automatically switch css html background color

Downloads

21

Readme

overflow-color Build Status 0 dependency npm bundle size (minified + gzip)

Demo

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-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.

<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">

With a module bundler

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.

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:

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 <div data-oc-wrap>. Then it set to the wrapper the same background as the body, and set body's background to transparent.

Add the data-oc-outside attribute to any body's immediate children that you don't want to be included into this wrap element at DOM content load.

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.

Browsers compatibility

I successfully tested this library, on:
Mac OS Mojave: Safari v11, Google Chrome v70 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.

Build

Compile with Rollup:

npm run build

Build and test with Cypress:

npm test

License

This project is licensed under the MIT license.