JQuery ajax 滚动底部加载更多

Posted wgscd

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery ajax 滚动底部加载更多相关的知识，希望对你有一定的参考价值。

<%@ Page Language="C#" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Net" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<!DOCTYPE html>
<script runat="server">
  
    protected override void OnLoad(EventArgs e)
    
        Response.Write("" + DateTime.Now.Ticks + "       " + pn.Value);
    
    
</script>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="jquery下载,实时更新jquery1.2到最新3.4.1所有版本下载" />
    <meta name="keywords" content="jquery下载" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit" />
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <title>---------------</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:HiddenField ID="pn" runat="server" Value="1" />
            <asp:Button ID="btn1" Name="btn1" runat="server" Text="fffffffffffffff" Height="51px" Width="224px" />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <p>uuuuuuuuuuuuuuuuuuu</p>

   <div id="goods">
            </div>
      
        </div>
    </form>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>


    <div id="pp" style="position: fixed; top: 0px; right: 4px;">
    </div>
    <script type="text/javascript">
        var pageNumber = 1;
        //alert(window.innerHeight);
        // scroll at bottom
        //jquery
        $(window).scroll(function () 
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = document.body.clientHeight; //$(this).height();//document.body.clientHeight;
            $("#pp").html(" scrollTop: " + scrollTop + "<br/>scrollHeight: " + scrollHeight + "<br/>windowHeight:" + windowHeight);

            if (scrollTop + windowHeight > scrollHeight - 100) 
               // alert("已经到最底部了！");
                loadPageData();
            
        );

        var isLoadComplete = true;
        function loadPageData() 
            if (isLoadComplete == false)  return; 
            isLoadComplete = false;
            var url = ‘/index.asp?page=‘ + pageNumber;   
  
            $.ajax(
                url: url,
                dataType: ‘text‘,
                success: function (data) 
                   // alert("ok");
                   // $("#pp").html(data);
                    $("#goods").append(data);
                    pageNumber++;
                ,

                complete: function (data) 
                    isLoadComplete = true;
                    //alert("complete");
                   
                ,

            );

        



    </script>
</body>
</html>

　　

另外 

本来是获取可见区域窗口高度。
google最新的浏览器这个开始用$(this).height(); 得到的高度和 $(document).height();一样，IE和低版本的谷歌浏览器是正常的。
var windowHeight = document.body.clientHeight; //$(this).height();//document.body.clientHeight;
看来在新版的谷歌浏览器（版本 75.0.3770.100（正式版本） （64 位））里$(this).height(); 得到的高度是整个内容文档的高度。。。。。。很晕。


以上是关于JQuery ajax 滚动底部加载更多的主要内容，如果未能解决你的问题，请参考以下文章

Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

当页面到达底部时，ajax 和 php 从 mysql 加载更多内容

jquery 上滑加载更多

uicollectionview 在底部滚动加载更多数据。 iOS 斯威夫特

滚动到页面底部 100px 时，jQuery 加载内容，触发多个事件

滚动到表格底部时如何添加“加载更多”页面