scrollHeight,clientHeight,scrollTop

scrollHeight,clientHeight,scrollTop移动端加载数据时,由于数据太多,不会一次性全部加载出来。有些会采用pc端那样用分页码的形式,但是更多的确实滑动滚动条到内容最后,加载更多内容出来。一般引入了三方的前端框架和插件,基本都会有此功能。偶尔会需要采用原生js实现,故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。原生js实现思路需要三个高度:scrollHeight(文档内容实际高度,包括超出视窗的溢出部分)、scrollTop(滚动条滚动距离)、clientHeight(窗口可视范围高度)。当clientHeig

大家好,又见面了,我是你们的朋友全栈君。

移动端加载数据时,由于数据太多,不会一次性全部加载出来。有些会采用pc端那样用分页码的形式,但是更多的确实滑动滚动条到内容最后,加载更多内容出来。一般引入了三方的前端框架和插件,基本都会有此功能。偶尔会需要采用原生js实现,故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。

原生js实现思路
需要三个高度:
scrollHeight(文档内容实际高度,包括超出视窗的溢出部分)、
scrollTop(滚动条滚动距离)、
clientHeight(窗口可视范围高度)。

当 clientHeight + scrollTop >= scrollHeight 时,表示已经抵达内容的底部了,可以加载更多内容。

scrollHeight:可以通过 document.documentElement.scrollHeight 、document.body.scrollHeight 获取;
clientHeight:可以通过window.innerHeight 、 document.documentElement.clientHeight 获取;
scrollTop:可以通过window.pageYOffset 、 document.documentElement.scrollTop 获取;

在这里插入图片描述

作者:郭先生_515
链接:https://www.jianshu.com/p/c59b2ccc963c
来源:简书

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/163754.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 服务器为什么要封海外,UDP攻击是什么「建议收藏」

    服务器为什么要封海外,UDP攻击是什么「建议收藏」为什么要封海外:总所周知,目前国内的大攻击大多都来自海外,因为国外的攻击成本比国内会低很多,一旦发起了攻击,并不容易找到攻击的源头。国外的家用带宽能达到千M口,咱们国内的百M口,相当于一只外国肉鸡能顶我们国内好几台肉鸡,那这个量是不得了的,而且国内的网站几乎很少有国外用户访问,目前封海外是国内的一大趋势。UDP攻击是什么:UDP攻击全称:UDP淹没攻击(UDPFloodAttack)。UDP淹没攻击是导致主机拒绝服务的一种攻击,属于带宽类攻击。UDP是一种无连接的协议,不需要用任何程序建立连接..

    2022年10月2日
  • stata 导出 相关系数表_STATA数据处理技巧与计量分析二|基本语句介绍

    stata 导出 相关系数表_STATA数据处理技巧与计量分析二|基本语句介绍更多精彩内容请关注211统计课堂上期小统和大家一起了解了STATA数据处理技巧与计量分析的背景介绍,这期小统和大家一起学习一下基本语句介绍。Stata操作界面核心功能(dofile)Stata中的命令集合文件,在编程语言中成为脚本(scripts),是指为达到某一分析目的进行的数据读取、数据处理、分析等的命令集合。Stata的基础语法基本语法结构:funNamevariable/(v…

    2022年6月16日
  • pytest指定用例_文件夹排列顺序自定义

    pytest指定用例_文件夹排列顺序自定义前言测试用例在设计的时候,我们一般要求不要有先后顺序,用例是可以打乱了执行的,这样才能达到测试的效果.有些同学在写用例的时候,用例写了先后顺序,有先后顺序后,后面还会有新的问题(如:上个用例返回

    2022年7月30日
  • Linux主机之间 使用 SSH 免密登录「建议收藏」

        首先看SSH免密登录简易原理图:主机A想要SSH免密登录主机B,首先需要将主机A的SSH公钥复制到主机B的授权列表文件,A登录B时,B会查看自己的授权列表文件,若存在A的公钥,经过一系列验证后,即可登录                  首先准备两台主机SSH-A和SSH-B(注意:两台主机必须能ping通)    我…

    2022年4月14日
  • ADO.NET Entity Framework插入和更新数据(实体框架快速入门)

    ADO.NET Entity Framework插入和更新数据(实体框架快速入门)

    2021年8月9日
  • chinese zodiac signs_icpc铜奖

    chinese zodiac signs_icpc铜奖输入23 14 3输出Impossible2 1 4 33 4 1 24 3 2 1题解 找规律+构造#include<bits/stdc++.h>using namespace std;const int N = 1001;int ch[N][N];int lowbit(int x){ return x & (-x);}int main(){ int n,k; int T; cin>>T; ..

    2022年8月9日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号