是否有一种简单的方法来确定当前正在显示哪些页面元素(在滚动的 Bootstrap 面板内)？
代码的相关部分在这里: http://jsfiddle.net/d451cmwh/
这个问题在 2011 年得到了一个 jQuery-heavy 解决方案的回答；我希望现在有更新/更简单的解决方案可用。 HTML how to tell which elements are visible?
谢谢! 迈克尔
来自 fiddle 的代码:
<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>
最佳答案
I'm hoping there is a more current / simpler solution available now
不幸的是，您需要始终在每个行元素上循环才能知道它是否可见。唯一的可能性是减少仅关注感兴趣元素的代码量。
因此我的建议(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>关于javascript - 如何知道哪些元素在 Bootstrap 滚动面板中可见？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46061859/