xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

infinite auto load more & infinite scroll & load more

https://codepen.io/xgqfrms/pen/NZVvGM

    autoScrollLoadMore(dom = ``, callback = () => console.log(`scroll load more, cb`)) {
        // let box = document.querySelector(`[data-dom="outbox"]`);
        let box = document.querySelector(dom);
        log(`box =`, box);
        log(`box.clientHeight =`, box.clientHeight);
        log(`box.scrollHeight =`, box.scrollHeight);
        log(`box.scrollTop =`, box.scrollTop);
        if (box) {
            let onceFlag = box.dataset.flag || false;
            if (!onceFlag) {
                box.dataset.flag = true;
                box.addEventListener(`scroll`, (e) => {
                    let {
                        clientHeight: ch,
                        scrollHeight: sh,
                        scrollTop: st,
                    } = e.target;
                    // let ch = e.target.clientHeight;
                    // let sh = e.target.scrollHeight;
                    // let st = e.target.scrollTop;
                    // log(`ch =`, ch);
                    // log(`sh =`, sh);
                    // log(`st =`, st);
                    // log(`(sh - st) =`, (sh - st));
                    // log(`(ch - 50) =`, (ch + 10));
                    let trigger = (sh - st) < (ch + 10) ? true : false;
                    log(`trigger =`, trigger);
                    if (trigger && this.isTriggerOnce) {
                        alert(`trigger loadMore function!`);
                        this.isTriggerOnce = false;
                        // fetch data
                        // callback();
                        setTimeout(() => {
                            // alert(`Ajax & fetch data success!`);
                            this.isTriggerOnce = true;
                        }, 1000);
                    } else {
                        // do nothing
                        // log(`(sh - st) =`, (sh - st));
                        // log(`(ch - 50) =`, (ch + 10));
                    }
                });
            } else {
                log(`only bind once!`);
            }
        } else {
            // error
            error(`box is null!`);
        }
    },

"use strict";

/**
 * 
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * 
 * @description scrollBottomAutoLoadMore
 * @augments 
 * @example 
 * @link 
 * 
 */

// utils
let log = console.log;
let error = console.error;

let box = document.querySelector(`[data-dom="outbox"]`);

let isTriggerOnce = true;

const scrollBottomAutoLoadMore = (debug = false) => {
    for (let i = 0; i < 20; i++) {
        let template = `<div class="innerbox" data-dom="innerbox">${i + 1}</div>`;
        box.insertAdjacentHTML(`beforeend`, template);
    }
    // let BoundingClientRect = box.getBoundingClientRect();
    // let ClientRects = box.getClientRects();
    // log(`BoundingClientRect =`, BoundingClientRect);
    // log(`ClientRects`, ClientRects);
    // Event
    log(`box.clientHeight =`, box.clientHeight);
    log(`box.scrollHeight =`, box.scrollHeight);
    log(`box.scrollTop =`, box.scrollTop);
    box.addEventListener(`scroll`, (e) => {
        // log(`e =`, e);
        // log(`e.target =`, e.target);
        // clientHeight, offsetHeight, scrollHeight
        let ch = e.target.clientHeight;
        // let ch = 50;
        // let cw = e.target.clientWidth;
        // let oh = e.target.offsetHeight;
        // let ow = e.target.offsetWidth;
        let sh = e.target.scrollHeight;
        let st = e.target.scrollTop;
        let trigger = (sh - st) < (ch + 10) ? true : false;
        // let trigger = (sh - st) < (ch + 50) ? true : false;
        // let triggerValue = (sh - st) < (ch + 50);
        if (trigger && isTriggerOnce) {
            alert(`trigger loadMore function!`);
            isTriggerOnce = false;
            for (let i = 0; i < 10; i++) {
                let template = `<div class="innerbox" data-dom="innerbox">${i + 1}</div>`;
                box.insertAdjacentHTML(`beforeend`, template);
            }
            setTimeout(() => {
                alert(`Ajax & fetch data success!`);
                isTriggerOnce = true;
            }, 1000);
        } else {
            // do nothing
            // log(`(sh - st) =`, (sh - st));
            // log(`(ch - 50) =`, (ch + 50));
            // log(`triggerValue =`, triggerValue);
        }
    });
    // MouseEvent
    box.addEventListener(`click`, (e) => {
        // log(`e =`, e);
        // log(`e.target =`, e.target);
        // pageX, pageY, screenX, screenY, clientX, and clientY
        let px = e.pageX;
        let py = e.pageY;
        // log(`px =`, px);
        // log(`py =`, py);
        let sx = e.screenX;
        let sy = e.screenY;
        // log(`sx =`, sx);
        // log(`sy =`, sy);
        let cx = e.clientX;
        let cy = e.clientY;
        // log(`cx =`, cx);
        // log(`cy =`, cy);
        let lx = e.layerX;
        let ly = e.layerY;
        // log(`lx =`, lx);
        // log(`ly =`, ly);
        let mx = e.movementX;
        let my = e.movementY;
        // log(`mx =`, mx);
        // log(`my =`, my);
        let ox = e.offsetX;
        let oy = e.offsetY;
        // log(`ox =`, ox);
        // log(`oy =`, oy);
    });
};



window.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOM fully loaded and parsed");
    scrollBottomAutoLoadMore();
});

// export default scrollBottomAutoLoadMore;

// export {
//     scrollBottomAutoLoadMore,
// };

vue-infinite-scroll

https://github.com/ElemeFE/vue-infinite-scroll

https://www.npmjs.com/package/vue-infinite-scroll

https://segmentfault.com/a/1190000011693433

v-infinite-scroll

https://github.com/dflourusso/v-infinite-scroll

https://www.npmjs.com/package/v-infinite-scroll

http://dflourusso.com.br/v-infinite-scroll/

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---