Check if Bootstrap tab-content is scrolled to end

Question

I have created bootstrap tab and their corresponding tab-content as per http://getbootstrap.com/javascript/#tabs
The html snippet is given below.

 <ul class="nav nav-tabs nav-justified">
              <li class="active" role="presentation"> 
                   <a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab">
              </li>
              <li>  
                   <a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab">       
              </li>
        </ul>

    <div class="tab-content">
         <ul class="list-group media-list media-list-stream tab-pane active" id="tab1" role="tabpanel">
         </ul>
         <ul class="list-group media-list media-list-stream tab-pane" id="tab2" role="tabpanel">
         </ul>
    </div>

How to check if the tab-content has been scrolled to it's bottom.

The usual solution as mentioned in https://www.sitepoint.com/jquery-check-div-scrolled/ doesn't seem to work.

$(document).ready(function(){

    $(tab1).bind('scroll',chk_scroll);
});

function chk_scroll(e)

    {
        var elem = $(e.currentTarget);
        if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
        {
            console.log("bottom");
        }

    }

Answer 1

I have two solution for your answer.

Check the example code here CODEPEN .

1. If you do not fix the height of tab-content div then try this code(don't include CSS):

JS:

$(window).scroll(function() {
  if (isScrollBottom()) {
    alert('scroll end');
  }
});

function isScrollBottom() {
  var documentHeight = $(document).height();
  var scrollPosition = $(window).height() + $(window).scrollTop();
  return (documentHeight == scrollPosition);
}

2. If you fix the height of tab-content, the try this code:

JS:

$("#myTabContent").scroll(function (e) {
    e.preventDefault();
    var elem = $(this);            
    if (elem.scrollTop() > 0 && 
            (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) {
        alert("At the bottom");
    }
});

CSS:

.tab-content {
  height:150px;/*set height here*/
  overflow:auto;
}

I hope this resolves your issue. Enjoy :)