簡単!jQueryで無限スクロールで要素追加を実装
3615 ワード
この関数を入れるだけで、Twitterみたいな状態を実現できます。
以上です。頑張ってください。👍
test.js
// $('.example')のところにjQueryオブジェクトを入れる。
infinityScroll($('.example'));
// 無限スクロールで
// eは、jqueryオブジェクト。
function infinityScroll(e){
e.scroll(function() { // eがスクロールしたとき実行
var maxrange = e[0].scrollHeight; // 1.eの高さ
var range = e.scrollTop()+ e[0].offsetHeight; // 2.全スクロールの量の数値
if(range == maxrange){ // 1と2が同じの時、このDOM要素を最後に追加。
e.append($(`<span>example</span>`)); } }); }
上のコードで無理だった場合は、こちらで可能です。
// 画面の一番下についたときtrue
element.scrollHeight - element.scrollTop == element.clientHeight
elementの部分は、html、bodyが入ります。
// 画面の一番下についたときtrue
html.scrollHeight - html.scrollTop == html.clientHeight
情報源:http://js.studio-kingdom.com/javascript/element/scroll_height
Author And Source
この問題について(簡単!jQueryで無限スクロールで要素追加を実装), 我々は、より多くの情報をここで見つけました https://qiita.com/Yamkaz/items/bc36260411851f6733af著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .