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。如果不修复tab-content 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. 如果您修改了tab-content的高度，请尝试使用以下代码：

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

我希望这可以解决您的问题。享受：）

检查Bootstrap选项卡内容是否滚动到结尾

1 个答案: