鼠标移动时滚动窗口仅在鼠标移动时有效

Question

我有一个根据鼠标位置自动滚动的页面。我使用的代码非常简单，但它仅在鼠标实际移动时才有效。只要鼠标完全静止，页面就会停止滚动，这会导致抖动效果。无论我的鼠标是否移动，我都希望滚动继续发生。

这是我的 javascript (jQuery) 代码：

$(document).mousemove(function (e) {
  $('html, body').scrollTop(function (i, v) {
    var h = $(window).height();
    var y = e.clientY - h / 2;
    return v + y * 0.02;
  });
  $('html, body').scrollLeft(function (i, v) {
    var w = $(window).width();
    var x = e.clientX - w / 2;
    return v + x * 0.02;
  });
});

Answer 1

鼠标移动时滚动窗口仅在鼠标移动时有效

原来如此。

您可以决定手动触发 mousemove 事件。这是一次尝试：

$(document).mousemove(function (e) {
    $('html, body').scrollTop(function (i, v) {
        var h = $(window).height();
        var y = e.clientY - h / 2;
        return v + y * 0.02;
    });
    $('html, body').scrollLeft(function (i, v) {
        var w = $(window).width();
        var x = e.clientX - w / 2;
        return v + x * 0.02;
    });
});

var x = 1;
var y = 1;
setInterval(function() {
    x += 1;
    y += 100;
    event = $.Event('mousemove');
    event.clientX = x;
    event.clientY = y;
    $(document).trigger(event);
}, 300)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>
<p>this is a paragragh</p>