{"id":14975468,"url":"https://github.com/yowainwright/scrolldir","last_synced_at":"2025-10-02T05:31:19.282Z","repository":{"id":37963151,"uuid":"242942081","full_name":"yowainwright/scrolldir","owner":"yowainwright","description":"0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇  🔌💉","archived":false,"fork":true,"pushed_at":"2025-01-27T14:13:42.000Z","size":2448,"stargazers_count":40,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-19T05:29:47.904Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jeffry.in/scrolldir/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"dollarshaveclub/scrolldir","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yowainwright.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2020-02-25T07:55:24.000Z","updated_at":"2025-02-13T19:31:30.000Z","dependencies_parsed_at":"2023-01-21T18:45:22.053Z","dependency_job_id":null,"html_url":"https://github.com/yowainwright/scrolldir","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"purl":"pkg:github/yowainwright/scrolldir","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yowainwright%2Fscrolldir","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yowainwright%2Fscrolldir/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yowainwright%2Fscrolldir/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yowainwright%2Fscrolldir/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yowainwright","download_url":"https://codeload.github.com/yowainwright/scrolldir/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yowainwright%2Fscrolldir/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277958763,"owners_count":25905774,"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","status":"online","status_checked_at":"2025-10-02T02:00:08.890Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-09-24T13:52:04.938Z","updated_at":"2025-10-02T05:31:19.008Z","avatar_url":"https://github.com/yowainwright.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cfigure align=\"center\"\u003e\n  \u003cimg alt=\"scrolldir banner\" src=\"https://cloud.githubusercontent.com/assets/1074042/22093384/09f3c2a6-ddba-11e6-8706-7e63be185448.jpg\" /\u003e\n\u003c/figure\u003e\n\u003cp align=\"center\"\u003eLeverage Vertical Scroll Direction with CSS 😎\u003c/p\u003e\n\n\u003chr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://cdnjs.com/libraries/scrolldir\"\u003e\n    \u003cimg alt=\"CDNJS\" src=\"https://img.shields.io/cdnjs/v/scrolldir.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://unpkg.com/scrolldir@latest/dist/scrolldir.min.js\"\u003e\n    \u003cimg alt=\"unpkg\" src=\"https://img.shields.io/badge/unpkg-link-blue.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://snyk.io/test/github/yowainwright/scrolldir\"\u003e\n    \u003cimg alt=\"snyk\" src=\"https://snyk.io/test/github/yowainwright/scrolldir/badge.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/scrolldir\"\u003e\n    \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/scrolldir.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/home?status=ScrollDir%2C%20a%20micro%20JS%20lib%20that%20describes%20vertical%20scroll%20direction.%20https%3A%2F%2Fgithub.com%2Fdollarshaveclub%2Fscrolldir%20by%20%40pfisher42%20co%20%40yowainwright%20%40DSCEngineering\"\u003e\n    \u003cimg alt=\"Share on Twitter\" src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\u0026maxAge=2592000\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr\u003e\n\n\u003ch1 align=\"center\"\u003eScrollDir ⬆⬇\u003c/h1\u003e\n\nScrollDir, short for Scroll Direction, is a 0 dependency, ~1kb micro Javascript plugin to easily leverage vertical scroll direction in CSS via a data attribute. 💪\n\n### ScrollDir is perfect for:\n\n- showing or hiding sticky elements based on scroll direction 🐥\n- only changing its direction attribute when scrolled a significant amount 🔥\n- **ignoring small scroll movements** that cause unwanted jitters 😎\n\n\u003chr\u003e\n\n## Usage\n\nScrollDir will set the `data-scrolldir` attribute on the `\u003chtml\u003e` element to `up` or `down`:\n\n```html\n\u003chtml data-scrolldir=\"up\"\u003e\u003c/html\u003e\n```\n\nor\n\n```html\n\u003chtml data-scrolldir=\"down\"\u003e\u003c/html\u003e\n```\n\nNow it’s easy to change styles based on the direction the user is scrolling!\n\n```css\n[data-scrolldir=\"down\"] .my-fixed-header {\n  display: none;\n}\n```\n\n## In Action 🎥\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://dollarshaveclub.github.io/scrolldir/\"\u003e\n    \u003cimg src=\"https://cloud.githubusercontent.com/assets/1074042/22451992/ebe879b0-e727-11e6-8799-511209695e26.gif\" alt=\"Scrolldir gif\"  width=\"100%\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr\u003e\n\n## Install 📦\n\nnpm\n\n```sh\nnpm install scrolldir --save\n```\n\nbower\n\n```sh\nbower install scrolldir --save\n```\n\nyarn\n\n```sh\nyarn add scrolldir\n```\n\n## Setup 📤\n\n### Easy Mode\n\nAdd **dist/scrolldir.auto.min.js** and you’re done. There is nothing more to do! Scrolldir will **just work**.\n\nNow go write some styles using `[data-scrolldir=\"down\"]` and `[data-scrolldir=\"up\"]`.\n\n### Custom Mode 🛠\n\nAdd **dist/scrolldir.min.js**. You have access to the API options below and must invoke scrollDir.\n\n```javascript\nscrollDir();\n```\n\nTo use an attribute besides `data-scrolldir`:\n\n```javascript\nscrollDir({ attribute: \"new-attribute-name\" });\n```\n\nTo add the Scrolldir attribute to a different element:\n\n```javascript\nscrollDir({ el: \"your-new-selector\" });\n```\n\nTo turn Scrolldir off:\n\n```javascript\nscrollDir({ off: true });\n```\n\nTo turn provide a different scroll direction on page load (or app start):\n\n```javascript\nscrollDir({ dir: \"up\" }); // the default is 'down'\n```\n\nTo change the `thresholdPixels`—the number of pixels to scroll before re-evaluating the direction:\n\n```javascript\nscrollDir({ thresholdPixels: someNumber }); // the default is 64 pixels\n// example: scrollDir({ thresholdPixels: 10 })\n```\n\n## Example 🌴\n\n- [scrolldir](http://codepen.io/yowainwright/pen/9d5a6c6dcf2c17e351dcccfe98158e8b) on codepen.\n\nThis is a modular version of [pwfisher](https://github.com/pwfisher)'s [scroll-intent](https://github.com/pwfisher/scroll-intent.js). If you'd like to use scrolldir with jQuery—use Scroll Intent. Scrolldir should work easily within any front-end framework so it ditches library dependencies. ~TY!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyowainwright%2Fscrolldir","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyowainwright%2Fscrolldir","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyowainwright%2Fscrolldir/lists"}