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


back to top & back to bottom的更多相关文章

  1. Altium Designer16 如何分别导出TOP层和BOTTOM层

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 作者:struct_mooc 博客地址:https://www.cnblogs.com/stru ...

  2. menu({postion:{my:"left top"},at:"right bottom"})里的my与at会冲突吗

    my(默认值:"center")类型:String描述:定义被定位元素上对准目标元素的位置:"horizontal vertical" 对齐方式.一个单一的值, ...

  3. 每天CSS学习之top/left/right/bottom

    top:值域是数值或百分比,正负都可以.该值表示 距离顶部有多少像素.例如top:10px:即距离顶部10个像素. left/right/bottom与top如出一辙,只是方向不一样而已. 这些属性一 ...

  4. (四)学习CSS之position、bottom、left、right和top属性

    参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position 属性规定元素的定位类型. 这个属性定义建立元素布局所用的定位机制 ...

  5. css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?

     壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...

  6. vertical-align:top属性

    vertical-align这个是设置元素的垂直排列的. 用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐. 它的值比较多:baseline | sub | super | top | tex ...

  7. Top值

    业务开发中经常会用到元素或者浏览器窗口的各种top值,最近开发组件的过程中也遇到各种问题,因此决定好好总结一下. 常见的top值 scrollTop Element.scrollTop 属性可以获取或 ...

  8. css 样式中 margin padding和top类定位的区别

    1 margin margin 是外边距的意思,是边框到外部另一元素之间的距离,允许使用负值 语法结构: margin:5px auto;                  意思上下为5,左右平均居中 ...

  9. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

随机推荐

  1. git database 数据库 平面文件 Git 同其他系统的重要区别 Git 只关心文件数据的整体是否发生变化,而大多数其他系统则只关心文件内容的具体差异 Git 的设计哲学

    小结: 1.如果要浏览项目的历史更新摘要,Git 不用跑到外面的服务器上去取数据回来 2.注意 git clone  应指定版本,它复制的这个版本的全部历史信息: 各个分支  git init 数据库 ...

  2. mysql中int型的数字怎么转换成字符串

    字段:number  是integer类型    在表test中 select cast(number as char) as number from test; 或者convert()方法.因为转换 ...

  3. jQuery——开发插件

    当我们编写的代码可以供其他人甚至我们自己重用的时候,可以通过将这些代码打包成一个新插件. ###**在插件中使用别名∗∗自定义的插件就应该始终都使用jQuery这个名字来调用jQuery方法,或者也可 ...

  4. centos安装Qt

    转:http://blog.csdn.net/wavelee/article/details/7855727 在编译Qt4.8.6版本的库时,在配置时 ./configure 出现了如下的错误: Ba ...

  5. python--可迭代对象、迭代器和生成器

    迭代器 1.什么是迭代器? 不依赖于索引的取值方式 迭代是一个重复的过程,即每一次重复为一次迭代,并且每次迭代的结果都是下一次迭代的初始值 示例: str1 = 'abcde' count = 0 w ...

  6. php之魔术方法 __set(),__get(),__isset(),__unset()

    __set()与__get() 当一个类里面,属性被设置为私有属性时,这个属性是不能在外部被访问的.那么当我们又想在外部访问时该怎么办呢,我们可以用方法来实现.举例如下: 1 class Test 2 ...

  7. 从NMEA0183到GNSS定位数据获取(二)软件篇

    作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述 GPS我们都知道,一种用来全球定位的系统,后来俄罗斯推出了格洛纳斯定位系统,中国推出了北斗定位,欧盟有 ...

  8. 配置VS2013 + opencv 2.4.10

    其实我内心是极力反对装这么老的版本的,但是要交课堂作业~~好无奈 [注] : 如果按照本文配置不成功,可以试一下其他博客里面的配置(多试一试总能成功的) https://jingyan.baidu.c ...

  9. Educational Codeforces Round 89 (Rated for Div. 2) A. Shovels and Swords(贪心/数学)

    题目链接:https://codeforces.com/contest/1366/problem/A 题意 有两个数 $a$ 和 $b$,每次可以选择从一个数中取 $2$,另一个数中取 $1$,问最多 ...

  10. 【poj 2407】Relatives(数论--欧拉函数 模版题)

    题意就是求10^9以内的正整数的欧拉函数(Φ(n)表示<=n的与n互质的正整数个数). 解法:用欧拉筛和欧拉函数的一些性质:    1.若p是质数,Φ(p)=p-1:    2.欧拉函数是积性函 ...