jQuery页面滚动底部加载数据

$(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
          //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
          //shlar page = Number($("#redgiftNextPage").attr(‘currentpage‘)) + 1;
          //redgiftList(page);
         //$("#redgiftNextPage").attr(‘currentpage‘, page + 1);

    console.log("到底了,发起请求")
  }
});

解析:
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)。

原页面地址:https://www.cnblogs.com/chen-lhx/p/5121360.html

原文地址:https://www.cnblogs.com/yangwenbo/p/10329584.html

时间: 2024-10-29 03:33:55

jQuery页面滚动底部加载数据的相关文章

页面滚动动态加载数据

//返回顶部js $(window).scroll(function() {            var sc = $(window).scrollTop();            //var rwidth=$(window).width()            if (sc > 0) {                $("#goTopBtn").css("display", "block");                $(&

页面滚动动态加载数据,页面下拉自动加载内容 jquery

<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type="text/javascript"></ script> < script type="text/javascript"> $(document).ready(function(){ var range = 50; //距下边界长度/单位px var

JQuery ajax 滚动底部加载更多

<%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ Import Namespace="System.Net" %> <%@ Import Namespace="System.Data.SqlClient" %> <!DOCTYPE html> <script runat="

jQuery实现当拉动滚动条到底部加载数据

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现当拉动滚动条到底部加载数据</title><script type="text/javascript&qu

封装的图片预加载,数据加载到浏览器底部加载数据

html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <style> *{ padding:0; margin:0

[转]JavaScript实现 页面滚动图片加载

本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个的功能较炫的拖拽类,可是感觉想的太容易,实现起来遇见不少问题,如果技术分享做不到有助于人反而害人,那就歇菜了,所以还是等本人多找些资料研究研究,“拖拽类“先放放吧,下面开始正题... 为什么写这篇文章? 1.优化页面很实用的方法,技术实现不难: 2.搜索了相关内容的文章,好像都是用jQuery的方法

div滚动底部加载li,window滚动底部加载li

DIV固定高度滚动条滚动最底部,加载新的li <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <style> u

一个简单的无限滚动的加载数据实现

早上本来想研究昨天晚上携程的那道题目的,但是感觉不知道如何下手,就研究了下如何实现无限滚动加载数据. 以前项目里也用到过,不过是别人封装好的,我只需要调用就好了.自己做还是遇到了点小问题. 1.如何确定滚动条的位置,其实想通了很简单的,就是利用scrollHeight和scrollTop以及可视区的高度来实现的. 2.就是如何保证加载数据的时候,不会出现重复加载.这个也很简单,标记每次加载结束的位置.如果你用的是数据库的话,可以采用分页的形式,每次只添加一页的内容.每当滚动条到底部的时候再加载下

滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo

<html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn"> <meta charset="utf-8" /> <title>滚动加载|jquery.endless-scroll插件|使用demo</title> <script type="text/javascript"