Native Ajax write pull-up loading

Thoughts on pull-up loading

1 Pull-up loading is the time to pull the screen to the bottom to trigger the Ajax event request data

2. All the height of the height of the document to get the screen and the height of the scroll the code below is already compatible and can be taken directly

Javascript:alert (Document.body.clientWidth);       Web page visible area wide (body) alert (document.body.clientHeight);       Web page Visible Area high (body) alert (document.body.offsetWidth);      Web page visible area wide (body), including border, margin and other alert (document.body.offsetHeight);        Web page visible area wide (body), including border, margin and other alert (document.body.scrollWidth);       The full text of the Web page is wide, including the non-visible region alert (document.body.scrollHeight) when there are scroll bars;           The full text of the Web page is high, including the non-visible region alert (DOCUMENT.BODY.SCROLLTOP) when there is a scroll bar;           Top (scroll bar) alert (document.body.scrollLeft) that the webpage is being rolled over;                     The Left (scroll bar) alert (window.screentop) that the webpage is being rolled away;                     Browser distance Topalert (window.screenleft);                Browser distance Leftalert (window.screen.height);                 High alert (window.screen.width) for screen resolution;          Wide alert (window.screen.availHeight) for screen resolution;           High alert (window.screen.availWidth) for the working area of the screen available;                           The screen is available with a wide jqueryalert (window) of the workspace. Height ());                        The browser's current window has a visible area height of alert (document). Height ()); The height of the browser's current window document, alert ($ (document.body).Height ());  Browser Current Window document body height alert ($ (document.body). Outerheight (true));                            The total height of the browser's current window document body includes border padding Marginalert ($ (window). width ());                        Browser Current window viewable area width alert (document). width ());                Browser Current Window Document object width alert ($ (document.body). width ());  Browser Current Window document body width alert ($ (document.body). Outerwidth (true)); Browser Current Window document body total width includes border padding margin

　　

 //gets the current position of the scroll bar    functionGetscrolltop () {varscrolltop = 0; if(Document.documentelement &&document.documentElement.scrollTop) {scrolltop=Document.documentElement.scrollTop; } Else if(document.body) {scrolltop=Document.body.scrollTop; }        returnscrolltop; }    //gets the height of the current viewable range    functiongetclientheight () {varclientheight = 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); }        returnclientheight; }    //get the full height of the document    functiongetscrollheight () {returnMath.max (Document.body.scrollHeight, document.documentElement.scrollHeight); }

var function (opt) {        = opt | |  {};         var function  () {        };         function  () {

if (getscrolltop () + getclientheight () = = Getscrollheight ()) {//distance from top + current height >= The total height of the document represents sliding to the bottom              if (is_scroll = = = True) {//When this is true, the up method is called ...  . Is_scroll didn't read it. Look down.

   Up ();

  }}

        }    };

3. First to load the first page by default, call UpDown this method in Window.onload

   function () {        getData ();//The first page        upDown ({            up:getdata        })    is displayed when the page is loaded;}

4. When the page rolls to the bottom to trigger the up () method, the up call GetData this method. Here's how to get the data.

In the global definition of two variables var is_scroll = True;var count = 0;

Ajax is not introduced can see this http://www.cnblogs.com/seanlxj/diary/2018/01/30/8385498.html

var is_scroll = true;
var count = 0;
functionGetajax () {varEl, Li; varXHR =NewXMLHttpRequest (); Xhr.open (' Get ', ' page ' + Count + '. JSON ');        Xhr.send (); Xhr.onreadystatechange=function () {            varLoadingend = document.getElementById (' loadingend ')); varDropload = document.getElementById (' dropload ')); if(Xhr.readystate = = = 4 && xhr.status = = 200) {varres =Xhr.responsetext; vardata =Json.parse (RES); AllData= Alldata.concat (data);//A new page is spliced to the back;                if(Data.length = = 0{//when obtaining a data length of 0 indicates no count+ is not requesting data
Is_scroll = TRUE//defined as true LoadingEnd.style.display= ' Block ';//show No data
} el= Document.queryselector ("#wrapper ul");  for(varKinchdata) {//traversal of each piece of data obtained by Li= document.createelement (' li '); Create a node li.innerhtml= "<div class= ' item-top ' ><span class= ' item-title ' >" + data[k].name + "</span><span class= ' Item-money ' > + Data[k].money + "</span></div><div class= ' item-time ' >" + data[k].time + "</div& Gt;<div class= ' bottom-line ' ></div> "; El.appendchild (Li, el.childnodes[0]); } DropLoad.style.display= ' Block ';//display in Load}Else{//This dispensable is a fake no matter the request is not requested there will be a loaded animation setTimeout (function() {DropLoad.style.display= ' None '; }, 500)            }        }; }

<style>. Drop-Load {text-Align:center;            height:80px; Line-height:50px; }. Drop-load. Loading {display:inline-Block;            height:15px;            width:15px; Border-radius:100%;            margin:6px; border:2px Solid #666; Border-bottom-color:transparent; Vertical-Align:middle; -webkit-animation:rotate 0. 75s linear infinite; Animation:rotate0. 75s linear infinite; }        @-webkit-keyframes Rotate {0% {                -webkit-transform:rotate (0DEG); }            50% {                -webkit-transform:rotate (180DEG); }            100% {                -webkit-transform:rotate (360DEG); }} @keyframes Rotate {0%{transform:rotate (0deg); }            50%{transform:rotate (180deg); }            100%{transform:rotate (360deg); }}. loadingend {font-size:0. 3rem;            Color:black; Width:100%;            height:40px; Text-Align:center; }    </style>

<body><div>    <ul>    </ul></div><div id= "dropload" class= "Drop-load" style= " Display:none ">    <span class=" Loading "></span>    <span> loading </span></div> <div id= "Loadingend" class= "Loadingend" style= "Display:none" > in the End </div></body>

Native Ajax write pull-up loading