Jquery rolling event

 

Today, we need to perform asynchronous mouse scroll loading. I used to do a few operations, but all of them were written in pure js and I don't remember to put them in that file or project (I am too lazy to sort them out ).

I was going to write another one by myself. When I was about to do it, I suddenly found out that I was miserable. The mouse scroll event did not remember what it was [old, bad memory]. baidu or Google! You can find the method for this query,

However, many plug-ins can be used directly, such as jquery. endless-scroll and paulirish-infinite-scroll ~ It's hard to select one of the many. In the end, I am still too lazy to think about writing another one myself.

The powerful jquery has a scroll method. This is described and described in this document!

"Bind a handler to each scroll event that matches the element. Triggered when the scroll bar changes. The key is the following sentence. It is used when the conditions are met.

For this dome, I will use the window object for [My development needs]

Www.2cto.com

1 $ (document). ready (function () {// I am used to writing this

2 $ (window). scroll (function (){

3 // $ (window). scrollTop () This method is the scroll distance of the current scroll bar.

4 // $ (window). height () Get the height of the current form

5 // $ (document). height () Get the height of the current document

6 var bot = 50; // bot is the height of the bottom distance

7 if (bot + $ (window). scrollTop () >=( $ (document). height ()-$ (window). height ())){

8 // when the basic distance at the bottom + the scroll height> = the height of the document-the height of the form;

9 // We need to load data asynchronously.

10 $. getJSON ("url", {page: "2"}, function (str) {alert (str );});

11}

12 });

13 });

Add a var scrollH = 0 defined in outsourcing; // The position record of the last Rolling

And the judgment should be modified to (bot + $ (window ). scrollTop () >=( $ (document ). height ()-$ (window ). height () & $ (window ). scrollTop ()> scrollH

It may be better

In fact, this article may not be well written. The only difference between $ (window). height () and $ (document). height () is worth a little.

By the way, there is no difference between $ (window). scrollTop () and $ (document). scrollTop (). At least I didn't find it different in IE8.

I found a new problem. I don't know why this rolling method is executed twice ~~

From tomorrow's dawn