{"id":25543953,"url":"https://github.com/dimitrinicolas/overflow-color","last_synced_at":"2025-07-25T13:04:38.845Z","repository":{"id":57317031,"uuid":"83718900","full_name":"dimitrinicolas/overflow-color","owner":"dimitrinicolas","description":"Automatically switch CSS html background-color to bring a smooth user experience","archived":false,"fork":false,"pushed_at":"2020-09-23T16:17:24.000Z","size":3152,"stargazers_count":41,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T14:05:27.741Z","etag":null,"topics":["bouncing","css","front-end","javascript","overscroll","scrolling"],"latest_commit_sha":null,"homepage":"https://git.io/overflow","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimitrinicolas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-02T19:57:07.000Z","updated_at":"2024-02-11T11:33:59.000Z","dependencies_parsed_at":"2022-08-25T20:40:36.397Z","dependency_job_id":null,"html_url":"https://github.com/dimitrinicolas/overflow-color","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Foverflow-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Foverflow-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Foverflow-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimitrinicolas%2Foverflow-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimitrinicolas","download_url":"https://codeload.github.com/dimitrinicolas/overflow-color/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248456365,"owners_count":21106603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bouncing","css","front-end","javascript","overscroll","scrolling"],"created_at":"2025-02-20T07:39:53.818Z","updated_at":"2025-04-11T18:10:56.954Z","avatar_url":"https://github.com/dimitrinicolas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# overflow-color [![Build Status][travis badge]][travis link] ![0 dependency][dependency badge] ![npm bundle size (minified + gzip)][size badge]\n\n[![Demo](fixtures/demo.gif)][demo]\n\nTry it on your smartphone or with a trackpad on MacOS: [git.io/overflow][demo] \n([https://dimitrinicolas.github.io/overflow-color/][demo])\n\nA simple script that automatically switches CSS `html` `background-color` \naccording to scroll position.\n\nThis package is on npm\n\n```console\nnpm i overflow-color\n```\n\n## Usage\n\nYou simply must add the browser minified script \n[dist/overflow-color.umd.min.js](dist/overflow-color.umd.min.js) and the two \nattributes `data-oc-top` and `data-oc-bottom` to your body tag.\n\n```html\n\u003cbody data-oc-top=\"red\" data-oc-bottom=\"blue\"\u003e\n    \u003c!-- ... --\u003e\n    \u003cscript src=\"dist/overflow-color.umd.min.js\" async\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nYou can use the shortcut `data-oc` by separating the two values with a comma.\n\n```html\n\u003cbody data-oc=\"red,blue\"\u003e\n```\n\n### With a module bundler\n\nYou can import this package with a simple require or import.\n\n```javascript\nrequire('overflow-color');\n// with ES6+\nimport 'overflow-color';\n```\n\nYou don't have anything else to do, the script is automatically launched when \nthe DOM content is loaded.\n\n#### Manually re-check scroll position\n\nWhen you update body's overflow color attribute or make a huge change to the DOM \n(e.g. changing page with Angular) and that the vertical scroll position stayed\nat the top, the new document height may be smaller than the previous one, and\n`overflow-color` should set the overflow color to the bottom one, but it has not\nbe called by scroll event. In this specific case, you can use the default\nexported function `updateOverflowColor`:\n\n```javascript\nimport updateOverflowColor from 'overflow-color';\n\n/** Change DOM or body's overflow color attribute */\n\nupdateOverflowColor();\n```\n\n## CSS tricks, Behind the Scenes\n\nThis library will wrap all the body content inside a `\u003cdiv data-oc-wrap\u003e`.\nThen it set to the wrapper the same background as the `body`, and set `body`'s \nbackground to `transparent`.\n\nAdd the `data-oc-outside` attribute to any body's immediate children that you\ndon't want to be included into this wrap element at DOM content load.\n\nwhen the document is loaded:\n\n```html\n\u003c!doctype html\u003e\n\u003chead\u003e\n    \u003c!-- ... --\u003e\n    \u003cstyle\u003e\n        /* your style */\n        body {\n            background: lightgrey;\n        }\n    \u003c/style\u003e\n    \u003cstyle\u003e\n        /* style added by the script */\n        html { background: blue; }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody data-oc=\"red,blue\" style=\"background: transparent; /* style added by the script */ \"\u003e\n    \u003c!-- wrapper added by the script --\u003e\n    \u003cdiv data-oc-wrap style=\"background: lightgrey;\"\u003e\n        \u003c!-- ... your body's childs --\u003e\n        \u003cscript src=\"dist/overflow-color.umd.min.js\" async\u003e\u003c/script\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n```\n\nYou can read the [Designer News discussion][dn] about the different tried \ntricks.\n\n## Browsers compatibility\n\nI successfully tested this library, on:  \n**Mac OS Mojave**: Safari v11, Google Chrome v70 and Opera v51  \n**iOS 11**: Safari, Google Chrome v68, Firefox 12 and Microsoft Edge v42\n\nUnfortunately, Firefox on MacOS and Opera Mini on iOS doesn't show the\nover-scroll color even without this library.\n\nThis library pass an E2E test through Chrome with Cypress.\n\n## Build\n\nCompile with Rollup:\n\n```console\nnpm run build\n```\n\nBuild and test with Cypress:\n\n```console\nnpm test\n```\n\n## License\n\nThis project is licensed under the [MIT license](LICENSE).\n\n[travis badge]: https://travis-ci.org/dimitrinicolas/overflow-color.svg?branch=master\n[travis link]: https://travis-ci.org/dimitrinicolas/overflow-color\n[dependency badge]: https://img.shields.io/badge/dependencies-0-brightgreen.svg\n[size badge]: https://img.shields.io/bundlephobia/minzip/overflow-color.svg\n\n[demo]: https://dimitrinicolas.github.io/overflow-color/\n[dn]: https://www.designernews.co/stories/91663-switch-html-background-color-in-order-to-get-two-overflow-scrolling-colors-on-smartphones\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitrinicolas%2Foverflow-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimitrinicolas%2Foverflow-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitrinicolas%2Foverflow-color/lists"}