0
JavaScriptで自動ページ設定を使用して大きなデータ用のテーブルコンポーネントを開発しています。このコンポーネントは、現在表示されているページの行のみを作成します。ページがもう見えなくなると、コンポーネントは行を削除します。なぜ私は大きなテーブルでスクロールイベントを失うことがありますか？特にChromeで
すべての作業は問題ありません。「ページアップ」と「ページダウン」キーを使用してスクロールしてください。 removePageContent-メソッドが呼び出された後に（特にChromeブラウザで）スクロールイベントが再開されないことがあります。この一時的な問題を修正できるのは、表内のクリックだけです。ここで
$(document).ready(function() {
$.fn.isOnScreen = function() {
var win = $(".table-container").parent(); \t \t
var vpTop = win.scrollTop();
var vpLeft = win.scrollLeft();
var vpRight = vpLeft + win.width();
var vpBottom = vpTop + win.height();
var bounds = this.offset(); \t \t \t \t
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(vpRight < bounds.left || vpLeft > bounds.right || vpBottom < bounds.top || vpTop > bounds.bottom));
};
var createPageContent = function($page) {
if (!$page.hasClass('hasContent'))
{ \t
var pageId = parseInt($page.attr("pageId"));
var content = "";
for(var i = 1; i <= 100; i++) {
content = content + "<tr><td>" + (pageId * 100 + i) + "</td><td><div>value 2</div></td><td><div>value 3</div></td><td><div>value 4</div></td><td><div>value 5</div></td><td><div>value 6</div></td><td><div>value 7</div></td></tr>"; \t
}
$page.find(".placeholder").replaceWith(content);
$page.addClass('hasContent')
}
};
var removePageContent = function($page) {
if ($page.hasClass('hasContent')) {
\t console.log("removePageContent");
\t $page.removeClass('hasContent')
$page.find("tr").remove();
$page.append("<tr class='placeholder'></tr>");
}
};
$(".table-container").scroll(function() {
\t console.log("trigger scroll-event");
var bodies = $("tbody");
for (var i = 0; i < bodies.length; i++) {
var $elem = $(bodies[i])
if ($elem.isOnScreen()) {
\t \t \t \t createPageContent($elem);
} else {
\t removePageContent($elem);
}
}
});
\t //Create 50 pages
\t var pagesHtml = "";
\t for(var iPage = 0; iPage < 50; iPage++) {
\t pagesHtml = pagesHtml + "<tbody pageId='" + iPage + "'><tr class='placeholder'></tr></tbody>";
}
$("table").append(pagesHtml);
\t //Initialize page 0
\t var page0 = $(".table-container").find("tbody[pageId='0']");
createPageContent(page0);
});.table-container {
overflow-y: auto;
height: 400px;
width: 500px;
background-color: white;
}
tr {
height: 20px;
}
tr.placeholder {
height: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='table-container'>
<table>
<thead><tr><th>Title 1</th><th>Title 2</th><th>Title 3</th><th>Title 4</th><th>Title 5</th><th>Title 6</th><th>Title 7</th></tr></thead>
</table>
</div>
<div style="width: 400px; padding: 20px;">
Please click into the table and then press down and hold the <b>"page down"-key</b>. Sometimes the browser don't fire the scroll-event again (mostly after 'removePageContent' is called). Especially in the Chrome-Browser. It's strange but with the Chrome-CPU-Profiler running, it works. Any ideas?
</div>