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. JAVA知识点总结篇(三)

    抽象类 使用规则 abstract定义抽象类: abstract定义抽象方法,只有声明,不需要实现: 包含抽象方法的类是抽象类: 抽象类中可以包含普通方法,也可以没有抽象方法: 抽象类不能直接创建,可 ...

  2. Mysql的常见索引

    PRIMARY KEY(主键索引) ALTER TABLE table_name ADD PRIMARY KEY ( col ) 它是一种特殊的唯一索引,不允许有空值: UNIQUE(唯一索引) AL ...

  3. CLRS10.1-6练习 - 用双栈实现队列

    双栈实现队列算法: 分别考虑队列两种操作入队和出队,我们假设使用栈s1 s2, s1用来模拟入队,s2用来模拟出队 入队: 入队操作直接执行s1.push即可 出队: 代码实现 package hel ...

  4. 2019 欢聚时代java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.欢聚时代等公司offer,岗位是Java后端开发,因为发展原因最终选择去了 欢聚时代,入职一年时间了,也成为了 ...

  5. selenium自学笔记---下拉框定位元素select

    下拉框1.先定位select 然后在定位option city = driver.find_element_by_id("selCities_0") city.find_eleme ...

  6. ES5和ES6的继承

    ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一 ...

  7. 图片Image转换为base64编码的方法

    1.FileReader 通过XMLHttpRequest请求图片Blob数据格式,然后利用FileReader转换为dataURL function toDataURL(url, callback) ...

  8. mysql的yearweek 和 weekofyear函数

    1.MySQL 的 YEARWEEK 是获取年份和周数的一个函数,函数形式为 YEARWEEK(date[,mode]) 例如 2010-3-14 ,礼拜天 SELECT YEARWEEK('2010 ...

  9. vue 属性props定义方法

    当子组件接收父组件传过来的值的时候,我们一般有两种方式来接收 不过大家好像都用第二种方式,我只有在不确定数据类型的时候才用第一种方式 第一种: export default { // 不检测类型,全盘 ...

  10. 使用TP5验证器遇到的坑

    项目中需要对字段进行验证,本人使用的是控制器验证方式.话不多说,直接上报错信息: SQLSTATE[42S02]: Base table or view not found: 1146 Table ' ...