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,
pageX,clientX, screenX,
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, 禁止转载 ️，侵权必究️！
clientHeight & offsetHeight & scrollHeight的更多相关文章
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- 关于body/documentElement ---->clientHeight, offsetHeight, scrollHeight
http://blog.csdn.net/woxueliuyun/article/details/8638427 http://blog.sina.com.cn/s/blog_9dd702d50101 ...
- clientHeight,offsetHeight,scrollHeight迷一样的三个值
https://blog.csdn.net/qq_39083004/article/details/78498178 https://www.imooc.com/article/17571 推荐 o ...
- offsetHeight, clientHeight与scrollHeight的区别
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...
- clientHeight,offsetHeight与scrollHeight的相关知识
在html里,width与height是最常用也是最基础的两个属性,因此,在js里,我们也经常需要操作这两个属性.js关于这两个属性提供了client*,offset*与scroll*,很多同学搞不清 ...
- 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别
二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2 ...
- 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览
平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.heigh ...
- offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...
- clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...
随机推荐
- 逻辑bug 测试用例
1. 179. 最大数 - 力扣(LeetCode) https://leetcode-cn.com/problems/largest-number/ 给定一组非负整数 nums,重新排列它们每个数字 ...
- 翻页bug 在接口文档中应规范参数的取值区间 接口规范
<?php$a=array("red","green","blue","yellow","brown&q ...
- loj10103电力
题目描述 原题来自:CTU Open 2004 求一个图删除一个点之后,联通块最多有多少. 输入格式 多组数据.第一行两个整数 P,C 表示点数和边数.接下来 C 行每行两个整数 ,表示 P1 与 ...
- 一个sql盲注小工具 (Golang版)
并发,二分法判断. 源码写的有点垃圾,有点乱,结果也存在一些缺失. 记录: sql:select distinct 中的distinct选项,这是只会获取你表中不重复数据,是表中,而不是你一次sql执 ...
- BFS DFS与回溯
https://blog.csdn.net/u014303647/article/details/88328526 cyc: https://github.com/CyC2018/CS-Notes/b ...
- python3中zip对象的使用
zip(*iterables) zip可以将多个可迭代对象组合成一个迭代器对象,通过迭代取值,可以得到n个长度为m的元组.其中n为长度最短可迭代对象的元素个数,m为可迭代对象的个数.并且每个元组的第i ...
- js基础（使用Canvas画图）
HTML5的元素提供了一组JavaScript API,让我们可以动态地创建图形和图像. 图形是在一个特定的上下文中创建的,而上下文对象目前有两种.第一种是2D上下文,可以执行原始的绘图操作, 比如: ...
- JavaWeb——过滤器及监听器
什么是过滤器? 过滤器示意图 Filter是如何实现拦截的? Filter的生命周期 Filter的创建 Filter的销毁 FilterConfig接口 Servlet过滤器有关接口 过滤器配置 F ...
- （30）Linux文本处理
1.cat命令:连接文件并打印输出到标准输出设备 cat 命令可以用来显示文本文件的内容(类似于 DOS 下的 type 命令),也可以把几个文件内容附加到另一个文件中,即连接合并文件. cat 命令 ...
- 分布式-springboot基础入门
B站播放地址:https://www.bilibili.com/video/BV1PE411i7CV?t=51 博客地址:https://www.cnblogs.com/hellokuangshen/ ...