Question

我尝试了不同的方法为图像carouse设置水平滚动，最后进入了这个，但遗憾的是我无法弄清楚如何使用 Flickity 图像滑块来解决以下问题。浏览器控制台显示以下错误：

无法设置未定义的属性'x' 无法读取未定义的属性“x”

这些行为非常糟糕，你可以在 example of codepen.io

中看到

$('.gallery').mousewheel(function(e) {
    e.preventDefault();
    var flkty = Flickity.data(this);

    if (!window.wheeling) {
        // console.log('start wheeling!');

        if(e.deltaX > 0 || e.deltaY < 0){
            flkty.next();
        } else if(e.deltaX < 0 || e.deltaY > 0){
            flkty.previous();
        }
    }

    clearTimeout(window.wheeling);
    window.wheeling = setTimeout(function() {
        // console.log('stop wheeling!');

        delete window.wheeling;

        // reset wheeldelta
        window.wheeldelta.x = 0;
        window.wheeldelta.y = 0;
    }, 50);

    window.wheeldelta.x += e.deltaFactor * e.deltaX;
    window.wheeldelta.y += e.deltaFactor * e.deltaY;
    if(window.wheeldelta.x > 500 || window.wheeldelta.y > 500 || window.wheeldelta.x < -500 || window.wheeldelta.y < -500){
        window.wheeldelta.x = 0;
        window.wheeldelta.y = 0;

        if(e.deltaX > 0 || e.deltaY < 0){
            flkty.next();
        } else if(e.deltaX < 0 || e.deltaY > 0){
            flkty.previous();
        }
    }

    // console.log(window.wheeldelta);

});

P.S：代码在 this JQuery plugin 之上。

当我使用常规鼠标滚轮测试时，我看到问题的方式，实际上当手指停止时，滚轮同时停止，因此尽管控制台日志中存在错误，您仍然可以轻松地继续导航，一个月前，我改变了我的嘴到Apple Magic Mouse，如果我翻转强，我注意到错误日志仍在计算错误，我不能继续直到它到达终点，我还没有在笔记本触摸板上测试它，但我觉得像同样的问题仍将存在，我正在寻找解决问题的方法。

Answer 1

您尚未在任何地方设置window.wheeldelta变量，因此您无法为其分配x或y。在代码的开头添加某个地方：

window.wheeldelta = {x: 0, y: 0};

图像轮播中

1 个答案: