码迷,mamicode.com
首页 > Web开发 > 详细

JQuery ajax 滚动底部加载更多

时间:2019-07-11 16:59:20      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:document   client   低版本   let   rri   谷歌浏览器   adc   eve   scale   

<%@ 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 滚动底部加载更多

标签:document   client   低版本   let   rri   谷歌浏览器   adc   eve   scale   

原文地址:https://www.cnblogs.com/wgscd/p/11171059.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!