jquery - 基于滚动鼠标位置的功能

Question

基本上，我正在尝试为我的网站设置一个“自动滚动”选项，我已经有了它工作的基础，尽管如果您将鼠标移回左侧而不是右侧，它不会重新回滚。

我已经在这里待了三个多小时了，没有运气，所以在网上搜索过！

这是我所拥有的：

 $(document).mousemove(function(e){
    window.mouseXPos = e.pageX;
    window.mouseYPos = e.pageY; 
       var height = $(window).height() /2;
       if (window.mouseYPos < height){
        $('body,html').stop().animate({     
            scrollTop: window.mouseYPos
        },10 );
       }
       else{
        $('body,html').stop().animate({     
            scrollTop: -window.mouseYPos
        },10 );
       }    
    });

Answer 1

有可能当鼠标向左移动时，它正在离开窗口，所以它不会触发事件。您可能希望滚动到鼠标在窗口内的位置。尝试

$(document).mousemove(function(e){
   window.mouseXPos = e.pageX;
   window.mouseYPos = e.pageY;
   $('body,html').stop().animate({
    scrollTop: window.mouseYPos-$('window').height()/2,
    scrollLeft: window.mouseXPos-$('window').width()/2
   },1000 );
});

Answer 2

尝试在鼠标不移动的 100 毫秒后延迟动画，以避免在每个鼠标像素移动后开始新动画

scrollDelayTimer = null;
$(document).mousemove(function(e){
       window.mouseXPos = e.pageX;
       window.mouseYPos = e.pageY;

       clearTimeout(scrollDelayTimer);
       scrollDelayTimer = setTimeout(function () {
          scrollDelayTimer = null;
          $('body,html').stop().animate({
              scrollTop: window.mouseYPos,
              scrollLeft: window.mouseXPos
          },1000 );
       },100);
});