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. mysql远程连接速度很慢

    远程服务器的mysql数据库在服务器上自己连接速度很快,但是在我本地连接确实出奇的慢,进入数据库慢,打开数据表慢,什么都慢.想到之前有看到过应该是远程链接解析的问题,在查询MySQL相关文档和网络搜索 ...

  2. ubuntu安装shadow socks-qt5

    Ubuntu16安装shadow socks-qt5 在Ubuntu下也是有GUI客户端,怎么安装请看下面: 首先,针对Ubuntu16的版本可以直接这么安装: .$ sudo add-apt-rep ...

  3. ubuntu supervisor管理uwsgi+nginx

    一.概述 superviosr是一个Linux/Unix系统上的进程监控工具,他/她upervisor是一个Python开发的通用的进程管理程序,可以管理和监控Linux上面的进程,能将一个普通的命令 ...

  4. 依赖注入 DI 控制反转 IOC 概念 案例 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  5. asp.net core 3.1 中Synchronous operations are disallowed. Call FlushAsync or set AllowSynchronousIO to true instead

    在Action中解决措施: var syncIOFeature = HttpContext.Features.Get<IHttpBodyControlFeature>(); if (syn ...

  6. SpringCloud微服务基础学习

    看了蚂蚁课堂的微服务学习,确实学习了不少关于微服务的知识,现在总结学习如下 : SpringCloud微服务基础单点系统架构传统项目架构传统项目分为三层架构,将业务逻辑层.数据库访问层.控制层放入在一 ...

  7. 【WEB基础】HTML & CSS 基础入门(1)初识

    前面 我们每天都在浏览着网络上丰富多彩的页面,那么在网页中所呈现出的绚丽多彩的内容是怎么设计出来的呢?我们想要自己设计一个页面又该如何来做呢?对于刚刚接触网页设计的小伙伴来说,看到网页背后的一堆符号和 ...

  8. iOS - 崩溃异常处理(1)

    https://www.jianshu.com/p/4d32664dcfdb 一.关于崩溃 闪退估计是我们最不想看到的,对于用户而言,马上就能产生一种不悦,对于投资方而言,也会产生对技术实力的不信任感 ...

  9. 【转载】C#中Convert.ToInt32方法将字符串转换为Int32类型

    在C#编程过程中,可以使用Convert.ToInt32方法将字符串或者其他可转换为数字的对象变量转换为ToInt32类型,Convert.ToInt32方法有多个重载方法,最常使用的一个方法将字符串 ...

  10. 内部属性[[class]]

    1. 对象的[[class]]属性 所有typeof返回值为“object”的对象(如数组)都包含一个内部属性[[class]],这个属性无法直接访问,一般通过Object.prototype.toS ...