Cannot set/red property 'x' of undefined (horizontal scroll)

Question

I've tried different approaches to set up horizontal scrolling for image carouse and finally got onto this, but unfortunately I cant figure out how to resolve the following issue with Flickity image slider. The browser console shows these errors:

Cannot set property 'x' of undefined
Cannot read property 'x' of undefined

And those the behavior is pretty poor as you can see in this 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: The code works on top of this JQuery plugin.

I thought it was .wheelDelta with an uppercase D. Also it might be a special attribute used by only some browsers? — rhett, Dec 30 '15 at 17:07
Thank you for this suggestion, rhett. I've changed them to upper case, but the problem still remains, I've described what it might looks like into the answer to Ethnar (I wish I could duplicate here, stackoverflow doest allowed me) — Adrian, Dec 30 '15 at 17:36
I'm not really sure what you're trying to accomplish. I checked out the codepen.io example and it worked for me as I would expect (though it does give the error you mentioned). Is it to prevent it from continuing to scroll? I believe wheeldelta is a non-standard attribute and apparently the mousewheel works differently between OSes/Browsers. — rhett, Dec 31 '15 at 09:57

score 0 · Accepted Answer · answered Dec 30 '15 at 17:14

0

I don't recall that there'd be an existing property like wheeldelta in global scope in a browser and from your sample it'd seem like wheeldelta is something both calculated and used directly through your code.

In such case simply initiating wheeldelta at the beginning should fix your immediate issue:

window.wheeldelta = {}

answered Dec 30 '15 at 17:14

Ethnar

657
4
10

Thank you, Ethnar, at some way it eliminated the error from the console, but the behavior is still a bit laggy, the problem that I understand is when I tested it with a regular mouse wheel, in which actually the wheel stops at the same time when your finger stops, so beside the problem you could still easily continue to navigate, month ago I changed my mouth to Apple Magic Mouse and if I flip strong I notice like the error log is still going up and I cant continue untill it reaches the end, I didnt yet tested it on notebook touchpads, but I feel like the same problem will remain there. – Adrian Dec 30 '15 at 17:32

Cannot set/red property 'x' of undefined (horizontal scroll)

1 Answers1