Leverage Vertical Scroll Direction with CSS 😎
ScrollDir will set the
data-scrolldir attribute on the
<html> element to
Now it’s easy to change styles based on the direction the user is scrolling!
npm install scrolldir --save
bower install scrolldir --save
yarn add scrolldir
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
Add dist/scrolldir.min.js. You have access to the API options below and must invoke scrollDir.
To use an attribute besides
To add the Scrolldir attribute to a different element:
To turn Scrolldir off:
To turn provide a different scroll direction on page load (or app start):
; // the default is 'down'
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!