Question

我已经创建了一个在重复时自动滚动页面的功能，我现在希望稍微扩展一下，因为我希望能够在用户移动鼠标时暂停自动滚动。

基本上这个想法是，如果用户没有移动他们的鼠标，页面将自动滚动，一旦他们执行此功能将暂停并且他们将接管交互...直到他们再次停止

我有jsFiddle。这会按原样向上和向下滚动，但现在我需要在进行交互后立即暂停，或者在分别单击.start和.stop时暂停并重新启动动画。我的标记如下：

//run instantly and then goes after (setTimeout interval)
function autoScroll() {

    $("html, body").animate({
        scrollTop: $(document).height()
    }, 4000);
    setTimeout(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 4000);
    }, 4000);
    setInterval(function() {
        // 4000 - it will take 4 secound in total from the top of the page to the bottom
        $("html, body").animate({
            scrollTop: $(document).height()
        }, 4000);
        setTimeout(function() {
            $('html, body').animate({
                scrollTop: 0
            }, 4000);
        }, 4000);

    }, 8000);

}

autoScroll();

对此有任何建议将不胜感激！

Answer 1

以下方法将＆＃34; 暂停＆＃34;一个函数（更像是其中的代码）通过检查是否设置`Pattern p = Pattern.compile("data-aria-label-part=\"0\">(.*?)</p></div>"); Matcher m = p.matcher(website); ArrayList<String> matches = new ArrayList<String>(); while (m.find()) { matches.add(m.group(1)); System.out.println(matches); matches.remove(m.group(1)); }`标志，只要鼠标移动：

＆＃13;

mouseIsMoving

＆＃13;

Answer 2

这是你小提琴的DEMO分叉。

<强> HTML

<div style="height:2000px; float:left; width:100%;">
  Text text Text text Text text Text text Text text Text text Text text Text text Text textv Text text Text text Text text Text textText text

</div>

<div class="start">
  START
</div>
<div class="stop">
  STOP
</div>

<强> JS

var autoScrollInterval;
var autoScrollTimeout;
var mouseMoveTimeout = null

function startAutoScroll() {
    autoScroll();
  autoScrollInterval = setInterval(autoScroll, 8000);
}

function autoScroll() {
  $("html, body").animate({
    scrollTop: $(document).height()
  }, 4000);
  setTimeout(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 4000);
  }, 4000);
}

$(document).on('mousemove', function() {
    // Stop animation
        $("html, body").stop();

    // clear timeouts and intervals
    clearTimeout(mouseMoveTimeout);
    clearTimeout(autoScrollTimeout);
        clearInterval(autoScrollInterval);

    mouseMoveTimeout = setTimeout(function() {
        // restore auto scrolling
        startAutoScroll();
    }, 1000);
});

$(document).ready(function() {
  startAutoScroll();
});

简而言之，我使用jQuery的mousemove来检测鼠标是否在移动，然后清除间隔和超时。

如果你想更改autoscroll应该重新开始的时间，请在此处更改，现在设置为1秒：

mouseMoveTimeout = setTimeout(function() {
        // restore auto scrolling
        startAutoScroll();
}, 1000); // change time when autoscroll starts here

修改

您的声明很好，当用户滚动时我应该禁用自动滚动，并且我创建了代码的HERE

现在我们关注DOMMouseScroll（当浏览器是Firefox时）和mousewheel事件，因为$().on('scroll')将禁用整个代码段工作（我们应该检测滚动是否由用户）。

更新JS

var autoScrollInterval; var autoScrollTimeout; var restoreTimeout = null function autoScroll() { $("html, body").animate({ scrollTop: $(document).height() }, 4000); setTimeout(function() { $('html, body').animate({ scrollTop: 0 }, 4000); }, 4000); } function startAutoScroll() { autoScroll(); autoScrollInterval = setInterval(autoScroll, 8000); } function stopAutoScroll() { // Stop animation $("html, body").stop(); // clear timeouts and intervals clearTimeout(restoreTimeout); clearTimeout(autoScrollTimeout); clearInterval(autoScrollInterval); restoreTimeout = setTimeout(function() { // restore auto scrolling startAutoScroll(); }, 1000); } //Firefox $(document).bind('DOMMouseScroll', function(e) { stopAutoScroll() }); //IE, Opera, Safari $(document).bind('mousewheel', function(e) { stopAutoScroll() }); $(document).on('mousemove', function() { stopAutoScroll(); }); $(document).ready(function() { startAutoScroll(); });

jQuery：暂停鼠标移动功能或点击

2 个答案: