clientHeight & offsetHeight & scrollHeight

clientHeight & offsetHeight & scrollHeight

scrollWidth/scrollHeight,offsetWidth/offsetHeight,clientWidth/clientHeight

"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
    // 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;
        let mx = e.movementX;
        let my = e.movementY;
        let ox = e.offsetX;
        let oy = e.offsetY;
        // log(`lx =`, lx);
        // log(`ly =`, ly);
        // log(`mx =`, mx);
        // log(`my =`, my);
        // log(`ox =`, ox);
        // log(`oy =`, oy);
    });
};

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

// export default scrollBottomAutoLoadMore;

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

new version

"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
    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;
        // 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 + 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,
// };

clientHeight, offsetHeight, scrollHeight,

https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively

pageX,clientX, screenX,

https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

MDN

https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

getBoundingClientRect

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

getClientRects

https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects

window.scrollX & window.scrollY

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

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

.clientX

"use strict";

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

const touchSwipe = (
    dom = ``,
    callback = () => console.log(`touch swipe callback`),
    debug = false
) => {
    let log = console.log;
    let div = ``;
    if (dom) {
        div = document.querySelector(dom);
        if (div) {
            div.addEventListener("touchstart", handleTouchStart, false);
            div.addEventListener("touchmove", handleTouchMove, false);
        } else {
            log(`dom can not be found!`);
            return;
        }
    }
    if (debug) {
        log(`touchSwipe init OK!`);
    }
    let xDown = null;
    function getTouches(evt) {
        return evt.touches;
    }
    function handleTouchStart(evt) {
        const firstTouch = getTouches(evt)[0];
        xDown = firstTouch.clientX;
    };
    function handleTouchMove(evt) {
        if (!xDown) {
            return;
        }
        let xUp = evt.touches[0].clientX;
        let xDiff = xDown - xUp;
        if (xDiff > 0) {
            callback(true);
        } else {
            callback(false);
        }
        xDown = null;
    };
};

export default touchSwipe;

export {
    touchSwipe,
};

refs

---

---

xgqfrms 2012-2020

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

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

---