Forums

  • # 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 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 11:24 am

    Try this:

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

    and this updated demo using the newest jQuery.

    # 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.

    # 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

    # March 25, 2013 at 8:09 am

    Hey Mottie,

    Thanks for the script. I want to use in on my parallax style website so one automatically scrolls to the next div when using the mousewheel. A question though: what do I have to add in the script such that the effect is also triggered when using the arrow keys. Good examples of this i find:

    http://justsaytheword.com/
    http://onward.fiskerautomotive.com/en-us

    Thanks a million

    # November 20, 2014 at 9:32 am

    Hi Mottie,

    Your script is exactly what I’m looking for! When implementing it turned out not to work with higher versions of jquery though. Any idea what I should do to fix this?

    Thanks a lot!

    # November 20, 2014 at 10:19 am

    Never mind, I found the update for jquery.scrollTo.js, now it works :)

Viewing 14 posts - 1 through 14 (of 14 total)

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

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag