{"id":13630660,"url":"https://github.com/dollarshaveclub/scrolldir","last_synced_at":"2025-10-22T18:35:16.850Z","repository":{"id":58242515,"uuid":"78251146","full_name":"dollarshaveclub/scrolldir","owner":"dollarshaveclub","description":"0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇  🔌💉","archived":true,"fork":false,"pushed_at":"2020-03-26T18:40:05.000Z","size":2804,"stargazers_count":664,"open_issues_count":4,"forks_count":33,"subscribers_count":43,"default_branch":"master","last_synced_at":"2024-05-08T10:30:44.819Z","etag":null,"topics":["css","javascript","scroll","scrolling","sticky-elements","sticky-headers","y-axis"],"latest_commit_sha":null,"homepage":"https://github.com/yowainwright/scrolldir","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/dollarshaveclub.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":"2017-01-07T01:24:40.000Z","updated_at":"2024-02-08T19:49:08.000Z","dependencies_parsed_at":"2022-08-31T00:41:09.367Z","dependency_job_id":null,"html_url":"https://github.com/dollarshaveclub/scrolldir","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Fscrolldir","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Fscrolldir/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Fscrolldir/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dollarshaveclub%2Fscrolldir/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dollarshaveclub","download_url":"https://codeload.github.com/dollarshaveclub/scrolldir/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249359996,"owners_count":21257145,"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":["css","javascript","scroll","scrolling","sticky-elements","sticky-headers","y-axis"],"created_at":"2024-08-01T22:01:53.062Z","updated_at":"2025-10-22T18:35:16.521Z","avatar_url":"https://github.com/dollarshaveclub.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Framework agnostic packages"],"sub_categories":["Scrolling"],"readme":"\u003cp align=\"center\"\u003e⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    This software is maintained under a new repository located at \u003ca href=\"https://github.com/yowainwright/scrolldir\"\u003eyowainwright/scrolldir\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\u003c/p\u003e\n\n***\n\n\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://travis-ci.org/dollarshaveclub/scrolldir/\"\u003e\n    \u003cimg alt=\"Build Status\" src=\"https://travis-ci.org/dollarshaveclub/scrolldir.svg?branch=master\" /\u003e\n  \u003c/a\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://greenkeeper.io/\"\u003e\n    \u003cimg alt=\"Greenkeeper\" src=\"https://badges.greenkeeper.io/dollarshaveclub/scrolldir.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://github.com/dollarshaveclub/scrolldir\"\u003e\n    \u003cimg alt=\"Bower version\" src=\"https://badge.fury.io/bo/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\n```\nor\n```html\n\u003chtml data-scrolldir=\"down\"\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 { display: none; }\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```sh\nnpm install scrolldir --save\n```\nbower\n```sh\nbower install scrolldir --save\n```\nyarn\n```sh\nyarn add scrolldir\n```\n\n## Setup 📤\n\n### Easy Mode\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 🛠\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```javascript\nscrollDir({ attribute: 'new-attribute-name' });\n```\n\nTo add the Scrolldir attribute to a different element:\n```javascript\nscrollDir({ el: 'your-new-selector' });\n```\n\nTo turn Scrolldir off:\n```javascript\nscrollDir({ off: true });\n```\n\nTo turn provide a different scroll direction on page load (or app start):\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```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%2Fdollarshaveclub%2Fscrolldir","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdollarshaveclub%2Fscrolldir","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdollarshaveclub%2Fscrolldir/lists"}