jquery - 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

这是您要查找的内容：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!');
    }
});

编辑1：通过隐藏溢出来禁用滚动

$('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');
});

只是textarea.scrollHeight比较textarea.scrollTop。

滚动时查看您的控制台。希望有帮助！

Answer 2

这是我的解决方案（JSBin）：

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