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 ...
随机推荐
- (转载)微软数据挖掘算法：Microsoft 决策树分析算法（1）
微软数据挖掘算法:Microsoft 目录篇 介绍: Microsoft 决策树算法是分类和回归算法,用于对离散和连续属性进行预测性建模. 对于离散属性,该算法根据数据集中输入列之间的关系进行预测. ...
- linux 文件结构体和文件描述符号的学习
https://blog.csdn.net/cywosp/article/details/38965239
- UML 博客学习 后续继续完善
http://blog.csdn.net/monkey_d_meng/article/details/6005764 http://blog.csdn.net/badobad/article/det ...
- C++ Primer Plus读书笔记（六）分支语句和逻辑运算符
1. 以上均包含在cctype中 1 #include<cctype> 2 //#include<ctype.h> 2.文件操作 (1)头文件 1 #include<fs ...
- 一个实体对象不能由多个 IEntityChangeTracker 实例引用
因为需求需要EF 实现批量的删除后插入,所以出现了这个报错, 这个报错的原因是,EF查询是有带跟踪的,跟踪后其他上下文想操作这个实体就会报错. 所以,查询使用 ef AsNoTracking 查后无追 ...
- LOJ10065 北极通讯站
Waterloo University 2002 北极的某区域共有 n 座村庄,每座村庄的坐标用一对整数 (x,,y) 表示.为了加强联系,决定在村庄之间建立通讯网络.通讯工具可以是无线电收发机,也可 ...
- python中字符串的翻转（方法总结）
Python翻转字符串(reverse string), 一共包含5种方法, 其中第一种最简单, 即步长为-1, 输出字符串; 方法如下 5种方法的比较: 1. 简单的步长为-1, 即字符串的翻转(常 ...
- thymeleaf第一篇：什么是-->为什么要使用-->有啥好处这玩意
Thymeleaf3.0版本官方地址 1 Introducing Thymeleaf Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP . ...
- 彻底搞懂Cookie、Session、Token到底是什么
洛:大爷,楼上322住的是马冬梅家吧? 大爷:马都什么? 夏洛:马冬梅. 大爷:什么都没啊? 夏洛:马冬梅啊. 大爷:马什么没? 夏洛:行,大爷你先凉快着吧. 在了解这三个概念之前我们先要了解HTTP ...
- Centos根目录100%解决思路
Centos 7 根目录(爆满)100%解决思路,下面以宝塔面板环境为例 1.首先远程到服务器,在~下输入df -h ,看下根目录下文件夹使用情况 [root@localhost~]# df -h F ...