Code Monkey home page Code Monkey logo

scrollintent's Introduction

scrollIntent

With scrollIntent, you can determine what a user intends to achieve based on the way they are scrolling, triggering functionality specific to that behaviour. This can make for a more intuitive and optimised experience for the user.

Example uses:

Read the article that describes some uses for scrollIntent - Experimenting with Custom Functionality Appropriate to a User’s Scrolling Behaviour

A Step Toward Better Infinite Scrolling

On a page with infinite scrolling, if the user is scrolling down slowly, we can assume they are focused on the content and continue loading more content as they scroll. However, when the user scrolls down too fast to be focused on content, we can then stop loading content and instead, allow the user to naturally reach the page's end. Infinite scrolling with a footer -- the best of both worlds!

Offer Immediate Navigation when the User Needs it

As with the infinite scrolling example, if a user starts scrolling over a certain speed, we can assume they are no longer interested in the content and instead want to navigate elsewhere. Rather than make the user scroll all the way to the top/bottom of the page to reach navigation, we can show that navigation via CSS/jQuery sooner.

How scrollIntent Works

scrollIntent monitors the scrolling behaviour of a user to allow you to execute functionality specific to that behaviour.

When a user begins scrolling, scrollIntent will determine attributes of scrolling, such as the direction, speed, method of scrolling and so on. These attributes can then be queried by a developer to determine when a function specific to a certain behaviour should be executed.

Usage

Please see Documentation for complete usage instructions.

Browser Support

Tested with the following desktop browser:

  • Google Chrome 33
  • Safari 7
  • Firefox 27
  • Opera 20
  • Internet Explorer 8, 9, 10, 11

scrollIntent is not supported on mobile/tablet devices. See Limitations.

Performance

When executing JavaScript during scrolling, care should be taken to ensure there are no impacts on performance. scrollIntent will run multiple conditional checks as the user scrolls. To do this without affecting performance, these conditional checks are run every 250 milliseconds. This amount of time can be changed in options. You should aim for a fine balance between performance and responsiveness of functions executed by scrollIntent.

Limitations

scrollIntent is developed for desktops only. For this reason, scrollIntent should be used for enhancing a website only.

scrollIntent doesn't work on mobile/tablets due to these devices applying limitations on JavaScript during scrolling. There are ways to work around this, such as using iScroll -- which "hijacks" the browsers scrolling mechanism. However, work arounds that "hijack" scrolling may add usability issues to a web page. Furthermore, scrollIntent most likely could with with iScroll but the two haven't been tested together.

Todo List

  • destroy() function
  • Make setupDeveloperIndicators also apply indicators for minWaypoint and maxWaypoint

Author

Ian Lunn

Support Future Development

To support the future development of scrollIntent.js and other open source projects created by Ian Lunn, please consider making a donation.

Your donation is not-for-profit (or beer!), and will allow Ian to spend a little less time on client projects and more time supporting and creating open source software.

Thank you.

Bitcoin:

Bitcoin donations may be sent to the following address:

1KEbFvcXL8m6LogG2wjSUFz2xH6PeN6jRd

scrollintent's People

Contributors

ianlunn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.