CODEWITHSUNDEEP
javascriptjquery
JasonMHirst
JasonMHirst

Reputation: 576

Determining when the user has scrolled to the end of a DIV

My page has a DIV, with overflow and I've placed two buttons on either side of the div to act as secondary scrolling methods.

When pressing the left button, the following script is run and seems to work perfectly:

        function slideLeft() {
        if ($("#divfieldWidgets").scrollLeft() == 0) {
            $('#divScrollWidgetsLeft').animate({ opacity: 0.1 }, 250);
            window.clearInterval(animationHandler);
        }
        $('#divfieldWidgets').animate({ scrollLeft: "-=100px" }, 250);
    }

However I just can't seem to be able to find a method to determine when the DIV has hit it's limit when scrolling right.

I'm pretty sure I need some calculation based on $("#divfieldWidgets").scrollLeft() and $("#divfieldWidgets").width(), but all arithmetic calculations I've performed on those two values don't yield any results that show any relation to the width, it's maximum, etc, etc.

There is ONE final option I thought of, and that's storing the current scrollLeft value in a temporary variable and comparing the new value; if there's no change, then it's reached the end but I'm sure there must be a more cleaner way of achieving this.

Any thoughts?

Upvotes: 0

Views: 247

Answers (1)

Salman
Salman

Reputation: 9447

You could use something like

$(function() {
    $('#lorem').scroll( function() {
        if ( $('#lorem').scrollLeft() == ($('#lorem p').width() - $('#lorem').width())) {
            alert('end!');
        }
    });
});

As shown here

I'd suggest store width on ready in variables accessible inside the scroll event

a = $('#lorem p').width();
b = $('#lorem').width();

and use them in function

if ( $('#lorem').scrollLeft() == (a - b)) {
    // rest of the code
}

This way, you'll save a couple of more function calls on scroll. As it is a very costly event that you should be using only if there is no other solution.

Ideally, you should use throttled function calls like this. Which will delay the function call and save a lot of resources.

Upvotes: 1

Related Questions