如何知道哪些元素在Bootstrap滾動面板中可見？

Question

是否有一種簡單的方法來確定當前正在顯示哪些頁面元素（在滾動Bootstrap面板內）？代碼

相關部分在這裏： http://jsfiddle.net/d451cmwh/

這個問題得到的回答早在2011年，一個jQuery的重液;我希望現在有更現代/更簡單的解決方案。 HTML how to tell which elements are visible?

謝謝！ 邁克爾

從小提琴代碼：

<div class="container"> 
<div class="row"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Title</h3> 
      <span class="pull-right"> 
       <ul class="nav panel-tabs"> 
        <li class="active"><a href="#tab1" data-toggle="tab">Tab 
          1</a></li> 
       </ul> 
      </span> 
     </div> 
     <div class="panel-body"> 
      <div class="tab-content"> 
       <div class="tab-pane active" id="test"> 

        <table> 
         <tr id="row1"> 
          <td>row 1</td> 
         </tr> 
         <tr id="row2"> 
          <td>row 2</td> 
         </tr> 
         <tr id="row3"> 
          <td>row 3</td> 
         </tr> 
         <tr id="row4"> 
          <td>row 4</td> 
         </tr> 
         <tr id="row5"> 
          <td>row 5</td> 
         </tr> 
         <tr id="row6"> 
          <td>row 6</td> 
         </tr> 
         <tr id="row7"> 
          <td>row 7</td> 
         </tr> 
         <tr id="row8"> 
          <td>row 8</td> 
         </tr> 
         <tr id="row9"> 
          <td>row 9</td> 
         </tr> 
         <tr id="row10"> 
          <td>row 10</td> 
         </tr> 
         <tr id="row11"> 
          <td>row 11</td> 
         </tr> 
         <tr id="row12"> 
          <td>row 12</td> 
         </tr> 
         <tr id="row13"> 
          <td>row 13</td> 
         </tr> 
         <tr id="row14"> 
          <td>row 14</td> 
         </tr> 
         <tr id="row15"> 
          <td>row 15</td> 
         </tr> 
         <tr id="row16"> 
          <td>row 16</td> 
         </tr> 
         <tr id="row17"> 
          <td>row 17</td> 
         </tr> 
         <tr id="row18"> 
          <td>row 18</td> 
         </tr> 
         <tr id="row19"> 
          <td>row 19</td> 
         </tr> 
        </table> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

我希望有可用的更大的電流/簡單的解決方案，現在

不幸的是，你需要總是在每個循環行元素，以便知道它是否可見。唯一的可能性是減少僅關注感興趣元素的代碼量。

因此我的建議（updated fiddle）是：

// 
 
// call the function getVisibleRows on scrolling or windows resize 
 
// 
 

 
$(window).on('resize', function(e) { 
 
    setTimeout(function() {getVisibleRows(e);}, 100) 
 
}); 
 
$('#test').on('scroll', getVisibleRows); 
 

 
function getVisibleRows(e) { 
 
    var str = []; 
 
    var docViewTop = $('#test').closest('.panel-body').offset().top; 
 
    var docViewBottom = docViewTop + $('#test').closest('.panel-body').outerHeight(); 
 
    $('table tr').each(function (idx, ele) { 
 
     var elemTop = $(ele).offset().top; 
 
     var elemBottom = elemTop + $(ele).outerHeight(); 
 
     if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) { 
 
      str.push($(ele).find('td').text()); 
 
     } 
 
    }); 
 
    $('#picStatus').text(str.join(', ')); 
 
};

.row { 
 
    margin-top: 10px; 
 
} 
 

 
.panel-tabs { 
 
    position: relative; 
 
    bottom: 30px; 
 
    clear: both; 
 
    border-bottom: 1px solid transparent; 
 
} 
 

 
.panel-tabs > li { 
 
    float: left; 
 
    margin-bottom: -1px; 
 
} 
 

 
.panel-tabs > li > a { 
 
    margin-right: 2px; 
 
    margin-top: 4px; 
 
    line-height: .85; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px 4px 0 0; 
 
    color: #FFFFFF; 
 
} 
 

 
.panel-tabs > li > a:hover { 
 
    border-color: transparent; 
 
    color: #FFFFFF; 
 
    background-color: transparent; 
 
} 
 

 
.panel-primary > .panel-heading { 
 
    color: #FFFFFF; 
 
    background-color: #000000; 
 
    border-color: #000000; 
 
} 
 

 
.panel-primary { 
 
    border-color: #000000; 
 
} 
 

 
.panel-tabs > li.active > a, 
 
.panel-tabs > li.active > a:hover, 
 
.panel-tabs > li.active > a:focus { 
 
    color: #FFFFFF; 
 
    cursor: default; 
 
    -webkit-border-radius: 2px; 
 
    -moz-border-radius: 2px; 
 
    border-radius: 2px; 
 
    background-color: rgba(255, 255, 255, .23); 
 
    border-bottom-color: transparent; 
 
} 
 

 
.tab-pane { 
 
    height: 150px; 
 
    overflow-y: scroll; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="panel panel-primary"> 
 
      <div class="panel-heading"> 
 
       <h3 class="panel-title">Title</h3> 
 
       <span class="pull-right"> 
 
        <ul class="nav panel-tabs"> 
 
         <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> 
 
        </ul> 
 
       </span> 
 
      </div> 
 
      <div class="panel-body"> 
 
       <div class="tab-content"> 
 
        <div class="tab-pane active" id="test"> 
 

 
         <table> 
 
          <tr id="row1"> 
 
           <td>row 1</td> 
 
          </tr> 
 
          <tr id="row2"> 
 
           <td>row 2</td> 
 
          </tr> 
 
          <tr id="row3"> 
 
           <td>row 3</td> 
 
          </tr> 
 
          <tr id="row4"> 
 
           <td>row 4</td> 
 
          </tr> 
 
          <tr id="row5"> 
 
           <td>row 5</td> 
 
          </tr> 
 
          <tr id="row6"> 
 
           <td>row 6</td> 
 
          </tr> 
 
          <tr id="row7"> 
 
           <td>row 7</td> 
 
          </tr> 
 
          <tr id="row8"> 
 
           <td>row 8</td> 
 
          </tr> 
 
          <tr id="row9"> 
 
           <td>row 9</td> 
 
          </tr> 
 
          <tr id="row10"> 
 
           <td>row 10</td> 
 
          </tr> 
 
          <tr id="row11"> 
 
           <td>row 11</td> 
 
          </tr> 
 
          <tr id="row12"> 
 
           <td>row 12</td> 
 
          </tr> 
 
          <tr id="row13"> 
 
           <td>row 13</td> 
 
          </tr> 
 
          <tr id="row14"> 
 
           <td>row 14</td> 
 
          </tr> 
 
          <tr id="row15"> 
 
           <td>row 15</td> 
 
          </tr> 
 
          <tr id="row16"> 
 
           <td>row 16</td> 
 
          </tr> 
 
          <tr id="row17"> 
 
           <td>row 17</td> 
 
          </tr> 
 
          <tr id="row18"> 
 
           <td>row 18</td> 
 
          </tr> 
 
          <tr id="row19"> 
 
           <td>row 19</td> 
 
          </tr> 
 
         </table> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div id="picStatus"></div>