Grow your CSS skills. Land your dream job.

scrollTo #ID with mouse-wheel (jsfiddle attached)

  • # April 6, 2012 at 10:19 am

    Hello,

    I am looking add mouse-wheel support to the ‘scrollTo’ method for scrolling to an ID or element. The attached jsfiddle seems to work partially, however, the mouse-wheel seems to scroll too far (skipping divs). If anybody can suggest a fix, that would be great. Thank You.

    http://jsfiddle.net/9Amdx/129/

    # April 6, 2012 at 10:53 am

    Also…it doesn’t seem to run with the latest jQuery release either…only 1.6.4

    # April 6, 2012 at 5:30 pm

    Hi NSR!

    You could just add a flag which ignores mousewheel changes while the scroll animation occurs:

    var $current, flag = false;

    $(function() {
    $('body').mousewheel(function(event, delta) {
    if (flag) { return false; }
    $current = $('div.current');

    console.log(delta);
    console.log($current);

    if (delta > 0) {
    $prev = $current.prev();

    if ($prev.length) {
    flag = true;
    $('body').scrollTo($prev, 1000, {
    onAfter : function(){
    flag = false;
    }
    });
    $current.removeClass('current');
    $prev.addClass('current');
    }
    } else {
    $next = $current.next();

    if ($next.length) {
    flag = true;
    $('body').scrollTo($next, 1000, {
    onAfter : function(){
    flag = false;
    }
    });
    $current.removeClass('current');
    $next.addClass('current');
    }
    }

    event.preventDefault();
    });
    });​

    Update the mousewheel plugin to 3.0.6, I think that fixes the issue. There were some changes in jQuery 1.7+ which required the mousewheel update.

    # April 7, 2012 at 1:18 am

    @mottie

    Thank you for the help. This seems to solve my goal, however I am still seeing a slight issue with the output. Sometimes during the scroll, the ‘active’ div will automatically scroll one div in reverse.

    If you have any suggestions…that would be great.

    Also I am fairly new with jsFiddle and having a problem updating the ‘mouse wheel’ script. I am aware of the manage resources panel…but can’t seem to find the script within an actual url…only zipped files that are available to download locally. Any Ideas?

    Updated fiddle: http://jsfiddle.net/9Amdx/187/

    Thank You

    # April 7, 2012 at 11:24 am

    Try this:

    http://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js

    and this updated demo using the newest jQuery.

    # April 7, 2012 at 12:03 pm

    Thank you

    # April 8, 2012 at 10:10 am

    Here is a demo of the final result of this thread. It’s a combination of the above updated demo with this one page nav demo.

    I thought I’d share it so others might benefit.

    # April 8, 2012 at 10:25 am

    Great! Thanks for your help and patience Mottie.

    # October 15, 2012 at 2:40 pm

    Hey guys. I love this page and all your support.

    Im new at this and I never get to make it work on my pc. What am I doing wrong? I copy every part of the code in its tags, in the head or where it should. But it still doesn’t work. Am I missing something?

    Please HELP! Thanks

    Mau

    # October 15, 2012 at 3:59 pm

    @yabadabadoo: Did you include the jQuery file necessary? v1.6.4? It is not shown in any of the windows on jsFiddle.

    # October 15, 2012 at 7:04 pm

    Yes @pcmac627 I actually did. Not working thow.

    # October 15, 2012 at 7:26 pm

    Well here I put so you can tell me what is wrong.
    [Test for scroll](http://testforscroll.comlu.com/6.html)

    # October 15, 2012 at 7:32 pm

    @yabadabadoo The order of script loading is incorrect. Load jQuery first:



    # October 15, 2012 at 8:08 pm

    Thanks @Mottie ! as simple as that.

    # October 15, 2012 at 9:54 pm

    Ok so to complete the idea now I tried to do the same with the combined example and I don’t get the mousewheel effect. Thanks again!

    [Test for scroll combined](http://testforscroll.comlu.com/7.html “”)

    By the way: is there a way to change what you see in the URL bar at the time you navegate the sections? Like when you get to the section 3 the URL says www. example. net/Section3

Viewing 15 posts - 1 through 15 (of 19 total)

The topic ‘scrollTo #ID with mouse-wheel (jsfiddle attached)’ is closed to new replies.

*May or may not contain any actual "CSS" or "Tricks".