车身滚动鼠标的位置?(Body scroll with mouse position?)

2019-06-26 23:43发布

基本上,功能是在这里,它只是需要一些改动,我不知道如何来调整,我已经写了,它正是我想要的这个小片段,但不滚动整个页面,它只是滚动“窗口”大小。

任何人都可以借此做出很神奇呢? :)

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

Answer 1:

您可能需要而取决于多远鼠标的偏移量相对于页面的中间有一个三角形: 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;
    });
});

下面是performes平滑版本: 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);
})();


Answer 2:

同样的事情也这样做呢? http://jsfiddle.net/zcVL7/4/

我凝聚了JS一点,但你有大部分:

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


文章来源: Body scroll with mouse position?
标签: jquery scroll