Knowledge of scroll direction, particularly on the y-axis, is very important for the web. It is important for analytics—knowing what customers are doing when they're scrolling. It is dually important for the interface. Many webpages do something when a customer is scrolling vertically (think sticky navigation for one). This is why we made a zero dependency javascript plugin called Scrolldir. You can view the demo page here.

UI elements that need vertical scroll awareness:

  • Hidden navigations
  • Social items that move or change as the webpage is scrolled
  • Navigational buttons or links

There are a lot of ways webpages use vertical scroll direction to give customers a better experience!

Even though vertical scroll direction is so widely used on the web, the experience could often greatly be improved. It is not uncommon to see a webpage where navigation elements jitters when a webpage is scrolled vertically—which becomes even worse for mobile devices. There are a number of reasons for this jitter and Scrolldir solves some of these issues perfectly!

What does ScrollDir do that's different?

Scrolldir is different for a few reasons compared to other scroll direction plugins.

Comparison as a JavaScript plugin:

  • It is very simple—it only managed up or down scroll direction.
  • It does not require other libraries and it can be required when needed into your webproject making it up-to-date with 2017 code practices
  • Because of the way it is written, a portion of the code can be tree shaken if so desired

Comparison as a Scroll Direction JavaScript plugin:

  • It stores the history of a webpage's scroll direction to avoid jitters—think when you accidently scroll up a bit and you're interrupted by something that shows up or pops onto the page
  • It only keeps a max of 32 scroll ticks in it's history or 512ms—so it doesn't bottlenecking memory

Scrolldir helps to provide buttery smooth customer facing features that happen as they scroll and for business analytics.

Scrolldir on DSC content

Scrolldir from Scroll Intent

Scrolldir is short for scroll Direction. It's nomenclature stems from keeping it short and direct like the plugin itself. Patrick Fisher wrote the core of Scrolldir. He wrote it as a jQuery plugin originally called Scroll Intent.

Using Scrolldir

Scrolldir is dead simple to use!

Install

npm

    npm install scrollDir --save

yarn

    yarn add scrolldir 

Setup

Add dist/scrolldir.min.js.

Usage

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; }

Summary

Scrolldir is a small, simple, zero dependency plugin that perfectly solves a common issue on webpages—scroll direction. It doesn't try to bloat or over compensate what it does. It just solves an issue that many developers deal with in a way where they can add Scrolldir and never worry about scroll direction issues again.