Body scroll with mouse position?

Question

Basically, the functionality is here, it just needs some refinement that I don't know how to tweak, I've written this small snippet that does exactly what I want, but doesn't scroll the whole page, it just scrolls the "window" size.

Can anyone take this and make it amazing? :)

$(document).mousemove(function(e){
        percent = ((e.pageY) * 100) / $(this).height(); 
        $('body,html').scrollTop( percent);         
});

Solution 1

You may rather want to have a delta depending on how far the offset of mouse is with respect to the middle of the page: http://jsfiddle.net/BYUdS/2/. That way, you can keep scrolling down so that there is no scroll limit (what you have now).

$(document).mousemove(function(e) {
    $("html, body").scrollTop(function(i, v) {
        var h = $(window).height();
        var y = e.clientY - h / 2;
        return v + y * 0.1;
    });
});

---

Here's a version that performes smoother: http://jsfiddle.net/BYUdS/3/.

var $elems = $("html, body");
var delta = 0;

$(document).on("mousemove", function(e) {
    var h = $(window).height();
    var y = e.clientY - h / 2;
    delta = y * 0.1;
});

$(window).on("blur mouseleave", function() {
    delta = 0;
});

(function f() {
    if(delta) {
        $elems.scrollTop(function(i, v) {
            return v + delta;
        });
    }
    webkitRequestAnimationFrame(f);
})();

Solution 2

Something similar to this? http://jsfiddle.net/zcVL7/4/

I condensed the JS a little, but you had most of it:

$(document).mousemove(function(e) {
    var percent = e.clientY / $(window).height();
    $('body, html').scrollTop($(document).height() * percent);
});​

Comments

[pimvdb]

@Raminson: Ah OK, so there was a use of it :). Thanks!

[Nope]

+1 for the smooth effects. I did notice in either solution though that it is very hard to make the very top item visible again. I think ones you get close to the top the mouse leaves the window before the very top items is fully shown again. I'm not tralking about moving the mouse fast just normal and placing it at the top of the page its a close call. Maybe a small off-set could be applied to ensure a little "eager" scrolling in either direction can be applied somehow to ensure the top and bottom items are fully shown before the mouse leaves the window.

[Shannon]

Hi @pimvdb, I'm just wondering why, when I copy the exact same code as yours into my js file, it returns an error saying "Uncaught TypeError: Object [object Object] has no method 'on' " If you could help me out that would be great, I'd like to try your option!

[Blender]

@FrançoisWahl: You can tweak the percent variable a little: jsfiddle.net/zcVL7/5

[Blender]

@Shannon: .on() is a jQuery method that was introduced only in the recent versions of jQuery. You're probably using an old version of jQuery.

[Nope]

@Blender: +1, well, on comment as I already +1ed you on answer :) Nice job and that little tweak is the icing on the cake. Very slick scroll-effect, well done.

[pimvdb]

@Shannon: Oh, I'm sorry, I replaced that automatically. You can continue to use .mousemove if you're using jQuery < 1.7.

[Shannon]

Thankyou so much for your help, although I still couldn't get your solution to work @pimvdb, I've made it work fine inside fiddle, although on my page It doesn't like it even with the "mouseover and mouseleave" event changes. I actually don't get any errors anymore, but it still doesn't work. shannonhochkins.v5.cloudsvr.com.au I've added your script at the very top of the "main.js" file but no luck :( any chance you could have a quick look?

[pimvdb]

@Shannon: You ought to put the code inside $(document).ready. As you can see I use a selector (html, body) so you have to wait until you can access the DOM. Also, webkitRequestAnimationFrame is WebKit only (obviously), so you'd need a shim for other browsers.

[pimvdb]

@Shannon: Oh, and your jQuery version doesn't support the .scrollTop(function() { syntax. Here's a fiddle targeted at jQuery 1.6 with the shim: jsfiddle.net/BYUdS/5.

[Shannon]

That did the trick @pimvdb! I would just literally include the newest jquery, although the hosting service I use automatically implement jquery, I might have to let them know it's not up to date! Thankyou again!

[PRANAV]

Thanks a lot for this script.

[DrKHunter]

Hi, I'm trying to use this method to scroll inside a container whose parent has a height of 100% body height, overflow hidden. If the inner container's height is more I'd like the mouse position to scroll it's content like the example.