当用户使用鼠标滚动或键盘时覆盖 Fullpage.js 中的自动滚动

Question

我正在寻找一点帮助！

我正在为我正在开发的 Wordpress 网站使用 Alvaro Trigo 的 Fullpage.js。

在主页上，我让每个部分每 5000 毫秒自动滚动一次。

但是，如果用户决定使用鼠标或键盘导航每个部分，则客户端已请求覆盖此设置。这可能吗？我有点不确定如何解决它。

Here is the work in progress.

提前致谢 — 非常感谢您的帮助！如果您需要更多信息，请告诉我。

Answer 1

您必须监听鼠标滚轮事件并清除您为自动滑动设置的间隔。

Example online

类似于：

addMouseWheelHandler();

function MouseWheelHandler(){
    clearInterval(myIntervalId);
}

function addMouseWheelHandler() {
    if (document.addEventListener) {
        document.addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
        document.addEventListener('wheel', MouseWheelHandler, false); //Firefox
    } else {
        document.attachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
    }
}

myIntervalId 将是一个 全局变量 ，您必须在创建内部变量时设置它：

var myIntervalId;

//whatever
myIntervalId = setInterval(fuction(){
    $.fn.fullpage.moveSectionDown();
}, 5000);

当用户使用鼠标滚动或键盘时覆盖 Fullpage.js 中的自动滚动

Override Automatic Scroll in Fullpage.js when user uses mouse scroll or keyboard

javascript

jquery

fullpage.js