ライブラリやフレームワークを使用せずに、プロジェクトに無限/無限スクロール（Facebookなど）を実装するにはどうすればよいですか？
ほとんどすべてのガイドはでこれを行う方法を示しjQuery、ReactそしてAngular私は、無限スクロールのネイティブJavaScript実装をしたいです。
ネイティブJavaScriptで記述された無限/無限のスクロールコードスニペットは次のとおりです。
window.onscroll = function () {
if (window.scrollY > (document.body.offsetHeight - window.outerHeight)) {
console.log("It's working!");
}
}
この関数の実行に遅延を追加するには（サーバーにリクエストを送信する場合、これは必須です）、次のように記述できます。
window.onscroll = infiniteScroll;
// This variable is used to remember if the function was executed.
var isExecuted = false;
function infiniteScroll() {
// Inside the "if" statement the "isExecuted" variable is negated to allow initial code execution.
if (window.scrollY > (document.body.offsetHeight - window.outerHeight) && !isExecuted) {
// Set "isExecuted" to "true" to prevent further execution
isExecuted = true;
// Your code goes here
console.log("Working...");
// After 1 second the "isExecuted" will be set to "false" to allow the code inside the "if" statement to be executed again
setTimeout(() => {
isExecuted = false;
}, 1000);
}
}
私は自分のASP.NET MVC 5プロジェクトでそれを使用していて、それは魅力のように機能します。
注：このコードスニペットは、一部のブラウザーでは機能しません（私はあなたのIEを見ています）。window.scrollYプロパティがあるundefinedIEに。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加