`

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
  }
 
}

 

0
0
分享到:
评论

相关推荐

    ajax tab页 滑动门小例子

    要创建一个Ajax Tab页滑动门,你需要做以下几步: 1. **HTML结构**:首先,建立一个包含多个Tab标签和对应内容区域的结构。每个Tab标签通常是一个链接或按钮,而内容区域可以是隐藏的div,初始状态下设置为不可见。...

    Mdate.js 移动端滑动日历插件

    Mdate.js的集成过程相当简单,只需几步即可完成: 1. **引入库**:首先在HTML文件中通过`<script>`标签引入iScroll.js和Mdate.js库,确保iScroll.js在Mdate.js之前加载,因为后者依赖前者。 ```html ...

    swiper.js手机触屏滑动选项卡标签切换代码.zip

    要实现这样的功能,我们需要做以下几步: 1. **引入Swiper.js库**:首先,需要在HTML文件中引入Swiper.js的CSS和JavaScript文件。这通常通过CDN链接或本地文件路径完成,确保样式和功能正常运行。 2. **创建HTML...

    不错的日历视图,可以上下滑动切换月份,可以点击某一天,进入查看该天的事件(按小时分)。可以添加事件。

    要创建这样的自定义日历视图,我们需要做以下几步: 1. **布局设计**:使用`RecyclerView`或者自定义滚动视图来实现上下滑动切换月份的功能。`RecyclerView`可以动态加载数据,节省内存,且支持横向和纵向滚动。每...

    ngTouch 滑动定位

    为了实现滑动定位,我们需要做以下几步: 1. **集成ngTouch模块**:首先,在你的AngularJS应用中导入`ngTouch`模块,并在你的主模块中声明依赖。 2. **创建自定义指令**:编写一个自定义指令,如`swipeMenu`,用于...

    js+css3网页左侧滑动菜单动画特效

    "js+css3网页左侧滑动菜单动画特效"就是这样一个实现方式,通过JavaScript和CSS3技术,为用户提供了一种优雅且直观的导航方式。 首先,我们来看JavaScript(js)在其中的作用。JavaScript是一种客户端脚本语言,它...

    react-实现类似微信客户端中图片滑动浏览缩放的react组件

    为了实现类似微信客户端的图片预览功能,你可能还需要考虑以下几点: 1. 图片列表的管理:创建一个图片数组,根据用户选择的图片索引展示对应的图片。 2. 缩放比例的控制:设置最小和最大缩放比例,以及缩放动画。 3...

    Vue编写的滑动拼图验证码前端及示例demo源码,vue滑动拼图验证码demo代码

    Vue.js 是一款非常流行的前端JavaScript框架,用于构建用户界面。滑动拼图验证码(Jigsaw Captcha)是一种常见的防止机器人自动操作的安全机制,通常用于验证用户是人类而非自动化程序。在本示例中,我们将讨论如何...

    经典网站模板,只需要简单的几步修改就可完成网站

    "经典网站模板,只需要简单的几步修改就可完成网站"这一标题暗示了我们面对的是一款经过精心设计,且易于定制的模板产品。通过这个模板,用户无需从零开始进行网页设计,只需对模板进行适当的个性化调整,就能搭建出...

    jQuery滑动导航菜单

    弹性滑动效果通常涉及到隐藏和显示子菜单,我们可以使用 `display` 属性来实现。例如: ```css #slidingMenu ul { list-style-type: none; margin: 0; padding: 0; } #slidingMenu li { position: relative; /...

    3种状态的IOS样式滑动按钮jQuery插件

    要使用这个插件,你需要做以下几步: 1. **引入jQuery库**:在你的HTML文件中,首先需要引入jQuery库,因为这个滑动按钮插件是基于jQuery构建的。 2. **下载插件**:获取提供的压缩包,解压后找到包含CSS样式和...

    ImageRotatorjs是一款效果非常炫酷的纯js3D旋转木马特效插件

    6. **易于集成**:将插件引入到HTML页面中,只需简单几步即可创建一个3D旋转木马,降低了开发难度。 7. **触控支持**:考虑到触摸设备的广泛使用,ImageRotator.js支持手势操作,用户可以通过滑动或点击来切换图片...

    jquery鼠标经过显示滑动图片遮住插件

    **jQuery库介绍** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript编程,使得网页动态交互变得更加容易。...它通过一种简洁的API,为开发者...只需简单几步,就能为你的项目增添专业级别的动态交互体验。

    iframe可以滑动并且隐藏scrollbar

    要在`iframe`中实现滚动并隐藏滚动条,我们需要做以下几步: 1. **安装依赖**:确保你的项目已经安装了`Vue.js`、`Vite`、`TailwindCSS`和`Vue Router`。如果尚未安装,可以使用`npm`或`yarn`进行安装: ```bash ...

    触屏手势库,基于Winter和Zepto.js完成_JavaScript_下载.zip

    基于Winter和Zepto.js完成的触屏手势库,提供了丰富的手势识别功能,使得开发者能够利用JavaScript轻松地实现类似于滑动、捏合、旋转、拖放等触摸操作。下面我们将深入探讨这个库的核心概念、工作原理以及如何在实际...

    jquery可滑动变长导航菜单.zip

    在本文中,我们将深入探讨如何使用jQuery创建一个可滑动变长的导航菜单,这个功能在现代网页设计中非常常见,能提供用户友好的交互体验。我们主要关注以下几个技术点:前端开发、CSS样式设计、JavaScript编程以及...

    图片加载器

    5. 资源预加载:预测用户可能需要的图片并提前加载,比如在滑动列表时预加载下几项的图片。 三、图片加载库和框架 在实际开发中,许多现成的图片加载库可以简化图片处理的工作,例如: 1. Android: Glide、...

    原生JS利用transform实现banner的无限滚动示例代码

    【原生JS实现无限滚动Banner】 在网页设计中,Banner是吸引用户注意力的重要元素,而无限滚动可以提供平滑的用户体验,使用户感觉Banner图片一直在连续播放。本篇文章将详细解析如何使用原生JavaScript结合CSS `...

    SPRY应用下载

    4. **效果(Effects)**:SPRY还提供了一些基本的视觉效果,如淡入淡出、滑动显示等,无需深入了解JavaScript,就能给网页添加动态效果。 5. **验证(Validation)**:SPRY的验证功能可以帮助我们确保用户输入的...

    js 幻灯片的实现

    这里我们主要讨论使用JavaScript实现幻灯片的基本思路和几种常见的方式。 1. 最简单的轮播实现方法是通过使用JavaScript定时器(如`setInterval`函数)来周期性地修改DOM结构。在上面的demo_1中,通过`appendChild`...

Global site tag (gtag.js) - Google Analytics