Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

scrolldir

Package Overview
Dependencies
Maintainers
2
Versions
32
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

scrolldir

Vertical scroll direction in CSS

  • 1.1.7
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
469
decreased by-17.72%
Maintainers
2
Weekly downloads
 
Created
Source
scrolldir banner

Leverage Vertical Scroll Direction with CSS 😎


Build Status 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 🐥
  • tracking events on scroll direction 🔬
  • only changing its direction attribute when scrolled a significant amount 🔥
  • ignoring small scroll movements that cause unwanted jitters 😎

In Action🎥

Scrolldir gif


Install 📦

npm

npm install scrollDir --save

bower

bower install scrollDir --save

yarn

yarn add scrolldir 

Setup 📤

Add dist/scrolldir.min.js.

Usage 🛠

scrollDir();

or

scrollDir();

By default, 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 styling for vertical scroll direction!

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

Options ⚗

To use an attribute besides data-scrolldir:

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

or

To add the Scrolldir attribute to a different element:

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

To turn Scrolldir off:

scrollDir({off: true});

Examples 🌴

This is a modular version of pwfisher's scroll-intent. If you'd like to easily use scrolldir with jQuery—use Scroll Intent. ~TY!

Keywords

FAQs

Package last updated on 12 Feb 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc