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

    问题:有n种硬币,面值分别为v1,v2,v3,…,vn,存于数组T[1:n]中,可以使用的各种面值的硬币个数存于数组Coins[1:n]中.对任意钱数0≤m≤20001,设计一个用最少硬币找钱m的方法 ...

  2. pytest_02-用例运行规则

    用例设计原则 文件名以test_*.py文件和*_test.py 以test_开头的函数 以Test开头的类 以test_开头的方法 所有的包pakege必须要有__init__.py文件 help帮 ...

  3. JDK和J2EE有什么关系

    JDK(Java Development Kit)是Java 开发工具J2EE是Java一个平台 Java 平台有三个版本,这使软件开发人员.服务提供商和设备生产商可以针对特定的市场进行开发:* Ja ...

  4. Harbor配置自签名证书,docker login+web https访问,helm chart推送应用

    注:高版本(14以上)docker执行login命令,默认使用https,且harbor必须使用域名,只是用ip访问是不行的. 假设使用的网址是:www.harbor.mobi,本机ip是192.16 ...

  5. JAVA8的java.util.function包

    一 概述 name type description Consumer Consumer< T > 接收T对象,不返回值 Predicate Predicate< T > 接收 ...

  6. 复杂sql语句之单字段分类count计数和多字段count计数

    SELECT AF_DEPARTMENT, dept.FULLNAME, SUM(CASE AF_CLASSIFY WHEN THEN ELSE END) AS 'o_standard', (COUN ...

  7. C# vb .net实现负片特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的负片特效呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...

  8. Gson含抽象类的反序列化

    Gson含抽象类的反序列化 场景描述: 反序列化A类的时候,这个类里面有一个抽象类属性B,B的实现类C里面又有一个抽象类属性D,D的实现类是E 实体类准备 public class A impleme ...

  9. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

  10. AppDir【创建缓存目录】【建议使用这个工具类】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 创建缓存目录 public static String APP_CACHE = "";// /storage/e ...