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

Check if Bootstrap tab-content is scrolled to end

本文关键字：滚动 是否 Bootstrap 选项 检查      更新时间：2023-09-26

我已经创建了bootstrap标签和相应的标签内容，详见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");
        }
    }

对于你的回答，我有两个解决方案。

查看此处的示例代码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。如果你修改了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;
}
我希望这能解决你的问题。享受:)
相关文章：