back to top & back to bottom

infinite auto load more & infinite scroll & load more

"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, 禁止转载 ️，侵权必究️！

巴特西

back to top & back to bottom

back to top & back to bottom

refs

xgqfrms 2012-2020

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

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

最新文章

热门文章

巴特西

back to top & back to bottom

back to top & back to bottom

refs

xgqfrms 2012-2020 www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！ 原创文章，版权所有️xgqfrms, 禁止转载 ️，侵权必究️！

最新文章

热门文章

xgqfrms 2012-2020

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

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