位置: 编程技术 - 正文

js实现滚动条滚动到页面底部继续加载(js滚动条滚动触发事件)

编辑:rootadmin

推荐整理分享js实现滚动条滚动到页面底部继续加载(js滚动条滚动触发事件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:用js实现滚动条,js控制滚动条到页面某个位置,js控制滚动条到页面某个位置,js滚动条滚动触发事件,js设置滚动条滚到底部,js滚动条滚动事件的作用是什么,js滚动条滚动事件的作用是什么,js滚动条滚动触发事件,内容如对您有帮助,希望把文章链接给更多的朋友!

这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。

原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部,算法如下

滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + /*我这里将滚动响应区域高度取px*/;如果这个判断为true则表示滚动条滚动到了底部。

实例

获取页面顶部被卷起来的高度函数

  chrome浏览器和Firefox/IE对滚动条是属于body还是html理解不同导致处理不同。

获取页面文档的总高度

js实现滚动条滚动到页面底部继续加载(js滚动条滚动触发事件)

  这个算法和jQuery计算文档高度的方法一致。

获取页面浏览器视口的高度

  这里需要说明的是document.compatMode这个东东。很陌生,一般情况貌似没有遇到过。

  document.compatMode有两个取值"BackCompat"和"CSS1Compat"。官方解释是BackCompat:标准兼容模式关闭。CSS1Compat:标准兼容模式开启。  IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。  举个例子说明两种模式之间的差别有多大。

  当document.compatMode等于"BackCompat"时,浏览器客户区宽度是document.body.clientWidth;

  当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。

  还有其他属性类似。这里不说了,但是我们可以预见两种模式导致IE渲染的基石都更改了,可想而知构建出来的建筑物差别当有多大。

  所以请为每一个页面声明Doctype不仅仅是一个好习惯,而且是一个必要的处理。Quirks Mode可以进垃圾堆了。

  好了下面附上完整的代码,有一个小例子(没有后台刷数据,只是显示等待条)

里面的加载条图片为

标签: js滚动条滚动触发事件

本文链接地址:https://www.jiuchutong.com/biancheng/386419.html 转载请保留说明!

上一篇:js获取url传值的方法(js获取url参数值的两种方式)

下一篇:thinkphp实现无限分类(使用递归)(thinkphp withjoin)

  • 年初存货跌价准备余额是上年末结转的吗
  • 税控盘退费怎么做会计分录
  • 建筑劳务公司工人工资要申报个税吗
  • 年终奖可以不计入年总收入吗
  • 第四季度报表和年度报表一样吗
  • 返利应计入什么科目
  • 公司基本户可以转私人账户吗
  • 小规模纳税人报税前需要做什么
  • 财务合理化建议例子
  • 服务行业成本费用问题与对策
  • 股东股权比例怎么分配
  • 购买的旧机械设备怎么办
  • 营改增前未完工的老项目可以开专票吗
  • 应收票据周转率多少合适
  • 垫资后转出的会计分录怎么写?
  • 支付员工经济补贴怎么算
  • 提供劳务收取现金会计分录
  • 你如何界定成本与费用之间区别?
  • 预付费用计入当期费用吗
  • 进项税已认证未入账如何处理
  • 印花税这个月没交怎么办
  • 开发票零税率和免税是一样的意思吗
  • 送礼没有发票怎么解决
  • 总账会计需要做账吗
  • 基本户转移到别的银行怎么转移
  • 分公司企业所得税怎么缴纳
  • 先开票还是先预约
  • 怎么确认投资性资金
  • 费用开两次发票怎么入账?
  • 机关党建经费提取比例
  • 网络适配器感叹号代码43
  • 鸿蒙 功能
  • 生产成本包括什么科目内容
  • 公司的职工教育是指什么
  • 公司之间可以借款吗怎么做账
  • 合伙企业财产清算顺序
  • 计提个体户经营所得税
  • 在linux中使用什么命令可以动态查看文件内容
  • 子公司财务管理策略有哪些
  • 餐饮定额发票能报销吗怎么报销
  • 集成代码
  • php目录结构
  • 出口退税率和进项税额
  • 本期应补退税额和期末未缴税额
  • 异地预缴个人所得税账务技巧
  • mongodb 安装
  • 对公户取备用金给员工
  • 固定资产入账和未入账的区别
  • 企业所得税年报更正申报怎么操作
  • 个体户 查账
  • 补发工资如何计税计算
  • 直接人工成本项目
  • 待摊费用会计处理
  • 转账支票的密码需要填写吗
  • 其他现代服务业是什么
  • 规划设计费收费依据
  • 客户到我公司签字怎么说
  • 会计凭证装订的心得体会
  • 结账时怎样根据日期填写
  • sqlserver用户权限不给增删查改表结构权限
  • 同一个sql语句 连接两个数据库服务器
  • bios设置光盘启动图解
  • Windows 2003作中转VPN服务器多路由共享上网的方法
  • macos如何新建文件
  • win7自带的软件
  • linux播放mp3命令
  • lsass exe
  • win10系统如何禁用u盘
  • 5个小技巧让你成长
  • 铁嘴大师
  • jquery 动态加载js
  • node.js实战
  • 安卓游戏引擎
  • jquery模拟表单提交
  • python中面向对象
  • unity ctrl
  • js正则检验手机号
  • python中的异常处理有哪些
  • 成都高新区办理社保在哪里?
  • 上期留底税额怎么查
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设