检查 Bootstrap 选项卡内容是否滚动到结束答案

【问题标题】：Check if Bootstrap tab-content is scrolled to end检查 Bootstrap 选项卡内容是否滚动到结束
【发布时间】：2018-02-15 15:14:01
【问题描述】：

我根据http://getbootstrap.com/javascript/#tabs创建了引导选项卡及其相应的选项卡内容
下面给出了 html sn-p。

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

    }

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3

【解决方案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;
}

我希望这能解决您的问题。享受:)

【讨论】：