back to top & back to bottom

back to top & back to bottom

infinite auto load more & infinite scroll & load more

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

"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"]`);

// bottom: 556.59375
// height: 525.59375
// left: 135
// right: 405
// top: 31
// width: 270
// x: 135
// y: 31

// height: 525.59375 ~= 526
// ch = 526

// 1562 - 1036 = 526
// sh = 1562
// st = 1036

// ch = 526
// cw = 253
// oh = 526
// ow = 270
// sh = 1562
// sw = 253
// st = 1036

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
    box.addEventListener(`scroll`, (e) => {
        // log(`e =`, e);
        // log(`e.target =`, e.target);
        // clientHeight, offsetHeight, scrollHeight
        let ch = e.target.clientHeight;
        let cw = e.target.clientWidth;
        // log(`ch =`, ch);
        // log(`cw =`, cw);
        let oh = e.target.offsetHeight;
        let ow = e.target.offsetWidth;
        // log(`oh =`, oh);
        // log(`ow =`, ow);
        let sh = e.target.scrollHeight;
        let sw = e.target.scrollWidth;
        // log(`sh =`, sh);
        // log(`sw =`, sw);
        let st = e.target.scrollTop;
        // log(`st =`, st);
        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 =`, sh);
            // log(`st =`, st);
            // log(`ch =`, ch);
            log(`(sh - st) =`, (sh - st));
            log(`(ch - 50) =`, (ch + 50));
            log(`triggerValue =`, triggerValue);
        }

        // clientHeight: 526
        // clientWidth: 346

        // offsetHeight: 526
        // offsetLeft: 182
        // offsetTop: 31
        // offsetWidth: 363

        // scrollHeight: 1562
        // scrollLeft: 0
        // scrollTop: 1036
        // scrollWidth: 346
    });
    // 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;
        // let sx = e.screenX;
        // let sy = e.screenY;
        // let cx = e.clientX;
        // let cy = e.clientY;
        log(`px =`, px);
        log(`py =`, py);
        let lx = e.layerX;
        let ly = e.layerY;
        let mx = e.movementX;
        let my = e.movementY;
        let ox = e.offsetX;
        let oy = e.offsetY;
    });
};

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

// export default scrollBottomAutoLoadMore;

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

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=scroll

refs

---

---

xgqfrms 2012-2020

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

原创文章，版权所有️xgqfrms, 禁止转载 ️，侵权必究️！

---