ブートストラップのタブコンテンツがスクロールして終了するか確認してください

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

回答には2つの解決策があります。

ここのサンプルコードを確認してくださいCODEPEN

1.あなたは、このコード（CSSが含まれていない）してみてくださいその後、タブコンテンツのdivの高さを修正しない場合：

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

私は、これはあなたの問題を解決したいと考えています。 お楽しみください:)