身体滚动到鼠标位置? [英] Body scroll with mouse position?

问题描述

基本上，功能就在这里，它只需要一些改进，我不知道如何调整，我已经编写了这个小片段，完全符合我的需求，但是并没有滚动整个页面，它只是滚动窗口"的大小.

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);         
});

推荐答案

您可能希望有一个增量，具体取决于鼠标相对于页面中央的偏移量:

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;
    });
});

---

这是一个更平滑的版本: 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);
})();

这篇关于身体滚动到鼠标位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！