1、如何判定H5中滑动到底部,然后加载更多的功能实现。

思路:我们需要设定一个固定高度的盒子,然后我们利用scroll来监听滚动,当scrollTop(滚动的距离) + clientHeight(页面的设定的高度) >= scrollHeight(页面内容总高度)

这样我们就可以判定页面内容滑动到底部了,然后加载更多数据。

 $("#Box").scroll(function () {
let scrollTop = document.getElementById("Box").scrollTop;
let clientHeight = document.getElementById("Box").clientHeight;
let scrollHeight = document.getElementById("Box").scrollHeight;
if (scrollTop + clientHeight >= scrollHeight) {
console.log("滑到底了")
}
})

以上,完毕。

另外:算自适应的高度,正确的做法是:

let mywidth = document.body.clientWidth;
let myheight = document.body.clientHeight - mywidth / 750 * 100;

关于H5判定区域里面滑动到底部,加载更多的总结的更多相关文章

  1. 滚动到底部加载更多及下拉刷新listview的使用

    最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...

  2. XRecyclerView:实现下拉刷新、滚动到底部加载更多以及添加header功能的RecyclerView

    介绍: 一个实现了下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView.使用方式和RecyclerView完全一致,不需要额外的layout,不需要写特殊的adater. ...

  3. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  4. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  5. Jquery实现滚动到底部加载更多(最原始)

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  6. JQuery ajax 滚动底部加载更多

    <%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ ...

  7. jquery页面滑到底部加载更多

    $(window).scroll(function(){ var _scrolltop = $('body').scrollTop();if(_scrolltop+_winHeight>_doc ...

  8. vant list列表滚动到底部加载更多会滚动到顶部问题

    如果使用异步加载数据并使用了vant中的toast做加载中提示,则有可能会导致列表滚动高度为0,也就是回到了顶部.只要在list加载回调里不使用toast就可以避免这个问题.

  9. RecycleView 滑动到底部,加载更多

    android.support.v7 包提供了一个新的组件:RecycleView,用以提供一个灵活的列表试图.显示大型数据集,它支持局部刷新.显示动画等功能,可以用来取代ListView与GridV ...

随机推荐

  1. 【实战经验】STM32烧录

    1.编译 2.配置烧录工具 2.配置烧录工具 3.配置烧录工具(一般街上Jlink就能检测到对应的STM32芯片) 5.选择FLASH 4.烧录 5.烧录完成

  2. PB 点击标题行排序和双击打开编辑页面共存不冲突的方法

    根据doubleclicked() 事件的参数 row 进行判断 大于0才进入编辑页面(不能用getrow()事件获取行id,双击标题行获取的是1) if row>0 then event ue ...

  3. powerful number求积性函数前缀和

    算法原理 本文参考了 zzq's blog . \(\text{powerful number}\) 的定义是每个质因子次数都 \(\ge 2\) 的数,有个结论是 \(\ge n\) 的 \(\te ...

  4. SQLite介绍和使用

    SQLite特点: (1)轻量级,跨平台的关系型数据库,所以支持视图,事务,触发器等. (2)零配置-无需安装和管理配置,存储在单一磁盘文件中的完整的数据库 (3)数据库文件可共享,支持多种开发语言. ...

  5. sqlserver安装教程

    1 安装步骤:http://jingyan.baidu.com/article/359911f573f71657fe030603.html 2 当提示装载第二张光盘时,在DAEMON Tools中把第 ...

  6. python Mock 示例

    在Python3.x中,mock已经被集成到了unittest单元测试框架中,所以,可以直接使用. 可能你和我初次接触这个概念的时候会有这样的疑问:把要测的东西都模拟掉了还测试什么呢? 但在,实际生产 ...

  7. Kubernetes Storage Persistent Volumes

    链接:https://kubernetes.io/docs/concepts/storage/persistent-volumes/ 支持的参数,比如mountOptions在这里可以找到 删除正在被 ...

  8. 2019 咪咕文化java面试笔试题 (含面试题解析)

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.咪咕文化等公司offer,岗位是Java后端开发,最终选择去了咪咕文化. 面试了很多家公司,感觉大部分公司考察的点 ...

  9. $.get、$.post、$getJSON、$ajax。

    当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问 ...

  10. suoermap的object.net循环遍历属性表,从数据库取数据进行更新属性字段值

    /// </summary> /// <param name="sName">图层名</param> /// <param name=&q ...