GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → dollarshaveclub → Scrolldir

dollarshaveclub / Scrolldir

Licence: mit
0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

cssscrollscrollingsticky-headers

Projects that are alternatives of or similar to Scrolldir

Recyclerview Fastscroller
A fully customizable Fast Scroller for the RecyclerView in Android, written in Kotlin
Stars: ✭ 585 (-13.84%)
Mutual labels:  scroll, scrolling
volx-recyclerview-fast-scroll
An easy to use implementation for fast scroll recyclerview
Stars: ✭ 34 (-94.99%)
Mutual labels:  scrolling, scroll
really-smooth-scroll
A script that smoothen scrolling in the browser
Stars: ✭ 21 (-96.91%)
Mutual labels:  scrolling, scroll
onscroll-effect
A tiny JavaScript library to enable CSS animations when user scrolls.
Stars: ✭ 35 (-94.85%)
Mutual labels:  scrolling, scroll
Ngx Scroll To
Scroll to any element to enhance scroll-based features in you app. Works for Angular 4+, both AoT and SSR. No dependencies.
Stars: ✭ 269 (-60.38%)
Mutual labels:  scroll, scrolling
NoobScroll
A lightweight jQuery Plugin that add some cool function to make scrolling more fun [Archive]
Stars: ✭ 43 (-93.67%)
Mutual labels:  scrolling, scroll
use-scroll-direction
A simple, performant, and cross-browser hook for detecting scroll direction in your next react app.
Stars: ✭ 24 (-96.47%)
Mutual labels:  scrolling, scroll
Moveto
A lightweight scroll animation javascript library without any dependency
Stars: ✭ 2,746 (+304.42%)
Mutual labels:  scroll, scrolling
Phytouch
Smooth scrolling, rotation, pull to refresh, page transition and any motion for the web - 丝般顺滑的触摸运动方案
Stars: ✭ 2,854 (+320.32%)
Mutual labels:  scroll, scrolling
srraf
Monitor scrolling and resizing without event listeners.
Stars: ✭ 26 (-96.17%)
Mutual labels:  scrolling, scroll
react-scroll-trigger
📜 React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.
Stars: ✭ 126 (-81.44%)
Mutual labels:  scrolling, scroll
Mac Mouse Fix
Mac Mouse Fix - A simple way to make your mouse better.
Stars: ✭ 362 (-46.69%)
Mutual labels:  scroll, scrolling
scroll-sync-react
A scroll syncing library for react that is up to date
Stars: ✭ 49 (-92.78%)
Mutual labels:  scrolling, scroll
react-smart-scroll
Efficient rendering of long lists in React
Stars: ✭ 27 (-96.02%)
Mutual labels:  scrolling, scroll
react-is-scrolling
Simply detect if users are scrolling in your components in a declarative API
Stars: ✭ 17 (-97.5%)
Mutual labels:  scrolling, scroll
EasyScrollDots
Single page scroll JavaScript plugin that allows for vertical navigation of page sections
Stars: ✭ 38 (-94.4%)
Mutual labels:  scrolling, scroll
Stickyfill
Polyfill for CSS `position: sticky`
Stars: ✭ 2,252 (+231.66%)
Mutual labels:  scroll, scrolling
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (-68.19%)
Mutual labels:  scroll, scrolling
scrollparent.js
A function to get the scrolling parent of an html element.
Stars: ✭ 51 (-92.49%)
Mutual labels:  scrolling, scroll
Jump.js
A modern smooth scrolling library.
Stars: ✭ 3,459 (+409.43%)
Mutual labels:  scroll, scrolling
View All Similar Projects ➔

⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

This software is maintained under a new repository located at yowainwright/scrolldir

⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

scrolldir banner

Leverage Vertical Scroll Direction with CSS 😎

Build Status CDNJS Greenkeeper npm version Bower version Share on Twitter

ScrollDir ⬆⬇

ScrollDir, short for Scroll Direction, is a 0 dependency, ~1kb micro Javascript plugin to easily leverage vertical scroll direction in CSS via a data attribute. 💪

ScrollDir is perfect for:

  • showing or hiding sticky elements based on scroll direction 🐥
  • only changing its direction attribute when scrolled a significant amount 🔥
  • ignoring small scroll movements that cause unwanted jitters 😎

Usage

ScrollDir will set the data-scrolldir attribute on the <html> element to up or down:

<html data-scrolldir="up">

or

<html data-scrolldir="down">

Now it’s easy to change styles based on the direction the user is scrolling!

[data-scrolldir="down"] .my-fixed-header { display: none; }

In Action 🎥

Scrolldir gif

Install 📦

npm

npm install scrolldir --save

bower

bower install scrolldir --save

yarn

yarn add scrolldir

Setup 📤

Easy Mode

Add dist/scrolldir.auto.min.js and you’re done. There is nothing more to do! Scrolldir will just work.

Now go write some styles using [data-scrolldir="down"] and [data-scrolldir="up"].

Custom Mode 🛠

Add dist/scrolldir.min.js. You have access to the API options below and must invoke scrollDir.

scrollDir();

To use an attribute besides data-scrolldir:

scrollDir({ attribute: 'new-attribute-name' });

To add the Scrolldir attribute to a different element:

scrollDir({ el: 'your-new-selector' });

To turn Scrolldir off:

scrollDir({ off: true });

To turn provide a different scroll direction on page load (or app start):

scrollDir({ dir: 'up' }); // the default is 'down'

To change the thresholdPixels—the number of pixels to scroll before re-evaluating the direction:

scrollDir({ thresholdPixels: someNumber }); // the default is 64 pixels
// example: scrollDir({ thresholdPixels: 10 })

Example 🌴

This is a modular version of pwfisher's scroll-intent. 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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].