Question

基本上，我正在尝试为我的网站设置一个“自动滚动”选项，我已经得到了它的工作基础，但是如果你将鼠标移回左边而不是右边。

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

这就是我所拥有的：

 $(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

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

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

滚动基于鼠标位置的功能

2 个答案: