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. Go MongoDB官方数据库驱动之增删改查

    package main import ( "context" "fmt" "log" "go.mongodb.org/mongo ...

  2. php GD 和图像处理函数, 制作一张图片

    php GD 和图像处理函数, 制作一张图片 // GD 和图像处理函数 // https://www.php.net/manual/zh/ref.image.php // https://www.p ...

  3. Django开发之module

    1.首先需要安装你要使用的数据的python模块组件 2.需要新建一个app 切换到工程根目录下,然后执行django-admin.py startpapp firstModule 编辑first/s ...

  4. python_封装redis_list方法

    xshell 进入 虚拟环境 安装 redis workon py3env # 进入虚拟环境 pip install redis # 安装redis deactivate # 退出虚拟环境 简单的封装 ...

  5. 【leetcode-11】盛最多水的容器

    给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...

  6. Linux 7 重置root密码

    在运维工作中经常会遇到不知道密码,密码遗忘,密码被他人修改过的情况,使用这种方式扫清你一切烦恼! 1.启动Linux系统,在出现引导界面时,按“e”键,进入内核编辑界面:2.找到有“linux16”的 ...

  7. WebService 与WebAPI的差异性

    对于 WebService和 Web API这两个概念, WebService是一个广义的概念,既 包括采用 RPC的 SOAP WebService,也包括直接建立在 Web 上的非 SOAP We ...

  8. Java调用Http/Https接口(3)--Commons-HttpClient调用Http/Https接口

    Commons-HttpClient原来是Apache Commons项目下的一个组件,现已被HttpComponents项目下的HttpClient组件所取代:作为调用Http接口的一种选择,本文介 ...

  9. Java之路---Day05

    2019-10-19-21:09:31 面向对象的封装性 封装性 概念:封装就是将一些细节信息隐藏起来,对于外界不可见 面向对象封装性在Java中的体现 1.方法就是一种封装 public class ...

  10. pandas-10 pd.pivot_table()透视表功能

    pandas-10 pd.pivot_table()透视表功能 和excel一样,pandas也有一个透视表的功能,具体demo如下: import numpy as np import pandas ...