Giter Club home page Giter Club logo

jquery.scrollsteps.js's Introduction

jquery.scrollsteps.js

Lightweight (<1KB) jQuery plugin to handle mousewheel scrolling by steps, handling many wheel types (click, inertia, etc.).

About

Mouse scrolling triggers a lot of scrolling events, especially with the new "magic" trackpads and mice that create a lot of inertia in the wheel.

So, if you are trying to setup a page design where the user should be able to scroll through elements "one at a time", this can cause a lot of problems, especially frustration as this easily can render the scrolling not so fluid.

This jQuery plugin solves this problem, and provides callbacks for each scrolling "step" in all directions (demo).

Usage

Simple use, with default options:

  $(target).scrollsteps({
    up: yourUpFunction // callback for the UP step scroll event, all the events are of course optional
    down: yourUpFunction // callback for the DOWN step scroll event
    left: yourUpFunction // callback for the LEFT step scroll event
    right: yourUpFunction // callback for the RIGHT step scroll event
  });

You can also configure additional internal values if these don't match your scenario, here is the list of complete parameters:

    transitionDuration: 2000, // Duration of the main transition event, for example page transitions in a fullPage scroller. 
    quietPeriodBetweenTwoScrollEvents: 400, // Increases responsiveness, minimum delay between two quiet periods (no scroll events) to force the transition event if the transitionDuration is not completed.

Requirements

  • jQuery, obviously
  • The jquery.mousewheel plugin by Brandon Aaron (latest version with deltaX and deltaY values embedded in the event object).

Please note, the jquery.mousewheel.js plugin is included in the Full version!

See it in action

Using the github example page.

Known issues

This has been only tested by me so far, using the hardware at hand and my use cases. So if you are experiencing issues, feel free report the bugs (or even better, contribute), as it only makes this more robust for everyone.

Licence

This is licenced using the MIT Licence.

Copyright (c) 2014 Arnaud Mondit

jquery.scrollsteps.js's People

Contributors

amondit avatar

Stargazers

Tao avatar  avatar Noppadon Sukpracha avatar Jean-Charles Amey avatar Gianpiero Spinelli avatar Naman Kumar avatar  avatar Guilherme Pangnotta avatar Marco Vincit avatar geokorolev avatar RhinoGrey avatar Full-Stack Alex avatar Mirko R avatar  avatar Darko Komerički avatar David avatar Hamid Sarfraz avatar Efrén Dgz avatar Alejandro Loayza avatar Pablo avatar Liz Morrison avatar Thomas Moreira avatar  avatar  avatar

Watchers

 avatar James Cloos avatar  avatar

jquery.scrollsteps.js's Issues

Feature request: scrollThreshold

It would be nice to have a scrollThreshold setting.

Currently if you scroll 1 pixel, it starts the scroll. It would be nice to be able to add a threshold, like 20px to give it a little less "twitch",

Trying to insert this pluginin in to jquery cycle2

I'm trying to integrate this plugin with the plugin - jquery cycle2. (http://jquery.malsup.com/cycle2/)
I used the file jquery.scrollsteps-full-min.js. ( https://github.com/amondit/jquery.scrollsteps.js/blob/gh-pages/jquery.scrollsteps-full-min.js ).

That's how I call the plugin:

$(function() {

    var $slider = $('.slider_overlay');

    // slider initialize
    $slider.cycle({
        fx: 'scrollVert',
        timeout: 0,
        pager: '.slider_list',
        pagerTemplate: '',
        pagerActiveClass: 'active_slide',
        slides: '> div',
        centerHorz: true,
        centerVert: true,
        speed: 1000
    });

    // initialize scrollsteps plugin
    $slider.scrollsteps({
        up: $slider.cycle('prev'),
        down: $slider.cycle('next')
    });

});

And, when I start to scroll the page up and down, I get the following error message from firebug console:
"TypeError: i.down is not a function" or "TypeError: i.up is not a function"

Perhaps someone has any ideas or thoughts why this error may occur?

If I use a default mousewheel init (without scrollsteps plugin) - everything worked fine:

$slider.mousewheel(function(e) {
    if (e.deltaY > 0) {
        $slider.cycle('prev');
    } else {
        $slider.cycle('next');
    }
});

but it triggers a lot of scrolling events.

Maybe I'm solve this problem incorrectly ? If somebody knows other solutions - will be very grateful for the help.

Fixed element out of the pages is not fixed

Hello,
Thanks for your great plugin.
I tried it and it worked well, but it seems like fixed elements out of the pages doesn't actually stick on the window, just like it's in relative position.
Have you noticed such issue ?
Thanks,
Bbemol

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.