detect when textarea is scrolled to bottom

Question

Is there a way to gauge when a user has scrolled to the bottom of an element? I know that jQuery can access the scrollTop() of an element, but even combining that with the element's height, I cannot calculate when an element has been scrolled to the bottom-most position. I would like to do this so when scrolling within a textarea I can prevent the body of the document from scrolling once the "scroll bottom" of the textarea is reached.

JSBIN

Answer 1

Here's what you're looking for: http://jsfiddle.net/BW8LT/1/

$('textarea#mytextarea').on('scroll', function() {
    var offset = 200; // height of textarea

    if (this.scrollHeight <= (this.scrollTop+offset)) {
        console.log('end of textarea!');
    }
});

Edit 1: disable scrolling by hiding the overflow

$('textarea#mytextarea').on('scroll', function() {
    var offset = 200; // height of textarea

    if (this.scrollHeight <= (this.scrollTop+offset)) {
        // hide the overflow (=> disable scrolling) when the end is reached
        $('body').css('overflow', 'hidden');
    }
});

// re-enable scrolling on mouseout
$('textarea#mytextarea').on('mouseout', function() {
    $('body').css('overflow', 'scroll');
});

Just compare textarea.scrollHeight with textarea.scrollTop.

Take a look at your console while scrolling. Hope that helps!