6

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

1252748
  • 14,597
  • 32
  • 109
  • 229

2 Answers2

14

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!

Mr. B.
  • 8,041
  • 14
  • 67
  • 117
  • I don't see a downvote, and I cannot understand why anyone would. This works great, thanks! How could I implement it so that the document would stop scrolling when the console displays its messages? – 1252748 Oct 28 '13 at 03:09
  • You'd like to disable scrolling for your whole page/document when the end is reached? I didn't understand your Question, I guess. Please let me know more details. – Mr. B. Oct 28 '13 at 03:13
  • Yes, I suppose that would be the best method. But then re-enable it when the cursor leaves the textarea, so that scrolling could be re-enabled. Does that make sense? – 1252748 Oct 28 '13 at 03:16
  • Why do you want to disable scrolling? Doesn't sound user-friendly, in my opinion. You should let decide the user if he'd like to scroll or not. What's your plan behind this idea? – Mr. B. Oct 28 '13 at 03:19
  • if the user is scrolling down a thousand lines in a textarea, when he or she arrives at the bottom don't make the page suddenly scroll down to the bottom. Only when the mouse is over an element that's not the textarea allow that. – 1252748 Oct 28 '13 at 03:23
  • Sounds well meant but could confuse the user - I wouldn't do that. I just edited my answer, just take a look. – Mr. B. Oct 28 '13 at 03:26
  • It's basically just a tool for me, so should be okay. Your solution is perfect. Thanks so much! – 1252748 Oct 28 '13 at 03:34
4

Here's my solution (JSBin):

$('textarea').scroll(function() {
  if ($(this).scrollTop() + $(this).height() >= $(this)[0].scrollHeight - 4) {
    alert("You scrolled to the bottom!");
  }
});
Christian Ternus
  • 8,406
  • 24
  • 39