jquery - 用鼠标位置滚动身体？

Question

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

任何人都可以接受并使它变得惊人吗？:)

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

Answer 1

类似的东西？http://jsfiddle.net/zcVL7/4/

我将 JS 压缩了一点，但你已经掌握了大部分内容：

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

Answer 2

您可能更希望有一个增量，具体取决于鼠标的偏移量相对于页面中间的距离：http: //jsfiddle.net/BYUdS/2/。这样，您可以继续向下滚动，这样就没有滚动限制（您现在拥有的）。

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