jQuery / JavaScript: Check if number is greater than another number by a minimum amount

Question

I have a function that fires only if a user has scrolled left or right, by doing the following:

var currentScrollLeft = visibleArea.scrollLeft();

visibleArea.scroll(function () {
    var newScrollLeft = visibleArea.scrollLeft();

    if (newScrollLeft > currentScrollLeft) {
        // do something
    }
});

But this fires after even the slightest change in scrollLeft. Is there a way I can tell it to only fire if it's moved more than a certain amount, say 50?

this answer might help: http://stackoverflow.com/questions/11971475/setting-css-value-limits-of-the-window-scrolling-animation/11971912#11971912 — Barlas Apaydin, Sep 24 '12 at 12:18

Mahn · Accepted Answer · 2012-09-24T12:37:56.413

3

if((Math.abs(newScrollLeft - currentScrollLeft)) > 50)

So your code above would become:

var currentScrollLeft = visibleArea.scrollLeft();

visibleArea.scroll(function () {
    var newScrollLeft = visibleArea.scrollLeft();

    if (Math.abs(newScrollLeft - currentScrollLeft) > 50) {
        // do something
    }

    currentScrollLeft = visibleArea.scrollLeft();
});

edited Sep 24 '12 at 12:37

answered Sep 24 '12 at 12:17

Mahn

16,261
16
62
78

this will only detect when scrolling right, can we also do the same when scrolling back the other way? What would be the best way to do this? – shrewdbeans Sep 24 '12 at 12:28
@Owen this will work both ways, because Math.abs returns the absolute value of 50 regardless whether the difference is 50 (left) or -50 (right). Try it ;) – Mahn Sep 24 '12 at 12:30
ahhh of course, I was using it wrong, I was appending it to my current if statement rather than replacing it. – shrewdbeans Sep 24 '12 at 12:34

jQuery / JavaScript: Check if number is greater than another number by a minimum amount

1 Answers1