检查Bootstrap标签内容是否滚动到结尾

Question

我已经按照http://getbootstrap.com/javascript/#tabs创建了引导程序标签及其对应的标签内容
html代码段如下所示。

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

如何检查选项卡内容是否已滚动到其底部。

https://www.sitepoint.com/jquery-check-div-scrolled/中提到的常用解决方案似乎不起作用。

$(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

对于您的答案，我有两种解决方案。

在CODEPEN处检查示例代码。

1.如果您不固定制表符内容div 的高度 ，请尝试以下代码（不包括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.如果您固定了制表符内容的高度，请尝试以下代码：

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;
}

希望这能解决您的问题。 请享用 ：）