脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS滑动加载数据

JS简单实现滑动加载数据的方法示例

 更新时间：2017年10月18日 10:53:02   作者：HazeOver  
这篇文章主要介绍了JS简单实现滑动加载数据的方法,涉及javascript事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了JS简单实现滑动加载数据的方法。分享给大家供大家参考，具体如下：

//滑动
function getScrollTop()
{
 var scrollTop = 0;
 if (document.documentElement && document.documentElement.scrollTop) {
   scrollTop = document.documentElement.scrollTop;
  }else if (document.body) {
  scrollTop = document.body.scrollTop;
  }
  return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight()
{
 var clientHeight = 0;
 if (document.body.clientHeight && document.documentElement.clientHeight) {
   clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
 }else {
   clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
 }
   return clientHeight;
}
//获取文档完整的高度
function getScrollHeight()
{
   return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
//绑定事件
window.onscroll = function ()
{
 if (getScrollTop() + getClientHeight() == getScrollHeight()) {
  //dosomething
 }
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 分享JavaScript监听全部Ajax请求事件的方法

    分享JavaScript监听全部Ajax请求事件的方法

    最近在做一个小项目，引入了第三方js文件，这个文件会调用XMLHttpRequest向服务器发送 Ajax请求，但是我有需要监听其Ajax请求的某些事件，以便额外地执行其他脚本。于是稍微看了看监听 Ajax请求的事件方法，在这里分享给大家。有需要的朋友们可以参考借鉴。
    2016-08-08
  • 一文了解ES5和ES6的区别

    一文了解ES5和ES6的区别

    ES6是JavaScript语言的主要增强,允许我们编写程序,ES6适用于复杂的应用程序,尽管ES5和ES6在本质上有一些相似之处,但它们之间也有许多不同之处,下面这篇文章主要给大家介绍了关于ES5和ES6区别的相关资料,需要的朋友可以参考下
    2023-05-05
  • 浅谈JavaScript中的string拥有方法的原因

    浅谈JavaScript中的string拥有方法的原因

    这篇文章主要介绍了浅谈JavaScript中的string拥有方法的原因,需要的朋友可以参考下
    2015-08-08
  • javascript匿名函数应用示例介绍

    javascript匿名函数应用示例介绍

    匿名函数，顾名思义就是没有名字，下面有个不错的示例，大家可以学习下
    2014-03-03
  • javascript 读取XML数据，在页面中展现、编辑、保存的实现

    javascript 读取XML数据，在页面中展现、编辑、保存的实现

    最近需要做这样一个需求，数据保存在XML里，在页面上通过表格显示其内容，可以修改内容，再保存到XML。下面把做这个东西的过程记录下来，做个笔记，也给需要的人一些帮助。
    2009-10-10
  • js opener的使用详解

    js opener的使用详解

    在JS中，window.opener只是对弹出窗口的母窗口的一个引用。本篇文章主要是对js中opener的使用进行了详细介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • JavaScript Event事件学习第一章 Event介绍

    JavaScript Event事件学习第一章 Event介绍

    Events是每一个JavaScript程序核心。什么是事件处理，它有什么问题和怎样写出跨浏览器的代码，我将在这一章做一个概述。我也会提供一些有精彩的关于事件处理程序的细节的文章。
    2010-02-02
  • 详解webpack2异步加载套路

    详解webpack2异步加载套路

    这篇文章主要介绍了详解webpack2异步加载套路,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 图文详解JavaScript的原型对象及原型链

    图文详解JavaScript的原型对象及原型链

    许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。下面小编将用最简洁明了的图文介绍JavaScript的原型及原型链。
    2016-08-08
  • js数组的基本操作(很全自己整理的)

    js数组的基本操作(很全自己整理的)

    这段时间做的一个项目，用到数组的地方很多，学了才知道js数组的功能强大很，远比VB,C#强多了
    2014-10-10

最新评论