Question

我在我网站的主页上使用了fullpage.js，并且我已经将它设置为每隔10秒自动滚动一次。
我已经使用了以下功能：

$( '#fullpage' ).fullpage({
    continuousVertical: true,
    loopHorizontal: false,
    resize: false,
    afterRender: function() { // so that it applies to first section too
        forceScroll();
    }
});
slideTimeout = setInterval( function() {
    $.fn.fullpage.moveSectionDown();
}, 10000);
function forceScroll() {
    var slideTimeout;
}

但是，当用户使用鼠标向下滑动或侧向滑动时，我想使用clearInterval(slideTimeout)，因为之后我想继续浏览它继续上下...这真的很烦人。 /> 但我似乎无法找到它的触发器，或任何解决方法！我怎么能做这个工作？

Documentation for Fullpage.js on GitHub;
The website I am speaking about

提前多多谢谢你，
菲利普

Answer 1

如果我理解为真，你想在用户滚动时取消绑定你的间隔。

$('body').on('mousewheel', function(e) {
    if (e.originalEvent.wheelDelta > 0) {
        if (typeof slideTimeout !== "undefined") {
            clearInterval(slideTimeout); //case for scroll up
            alert("Timeout clear");
        }
    } else {
        if (typeof slideTimeout !== "undefined") {
            clearInterval(slideTimeout); //case for scroll down
            alert("Timeout clear");
        }
    }
});

以下是系统的示例版本

    var slideInterval = setInterval(function() {
        $("#counter").text(parseInt($("#counter").text()) + 1);
    }, 1000);

    $('body').on('mousewheel', function(e) {
        if (e.originalEvent.wheelDelta > 0) {
           clearInterval(slideInterval);
           alert("Timeout clear");
        } else {
           clearInterval(slideInterval);
           alert("Timeout clear");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter" style="height:6000px;">0</div>

Answer 2

fullpage.js不提供鼠标滚轮/触控板事件的任何回调我害怕。

你必须自己做，因为@AhmetCanGüven表示。但我建议您寻找更多的跨浏览器解决方案mousewheel将无法在所有浏览器中使用。

停止fullpage.js SetInterval

2 个答案: