JQuery event scroll () method usage tutorial

Let me first introduce (document) the difference between height () and $ (window). Height ():

$ (document). Height () is the level at which the entire page is fetched
$ (window). Height () is the level of the portion of the page that is currently visible to your browser. This size changes when you zoom the browser window to a different document.

Use of scrolltop () and ScrollLeft ():

$ (document). ScrollTop () Gets the distance from the vertical scrolling, which is the top of the window to the top of the page, where the current scroll is.
$ (document). ScrollLeft () This is the distance to get the horizontal scroll bar

To get the top only need to get to scrolltop () ==0 is the top.

To get the bottom, just get scrolltop () >=$ (document). Height ()-$ (window). Height () to know that it has been scrolled to the end

Here is a simple example of a scroll event implementation monitoring scroll bar paging using AJAX loading:

The code is as follows

Copy Code

$ (document). Ready (function () { $ (window). Scroll (function () { $ (window). ScrollTop () This method is the current scroll bar scroll distance $ (window). Height () Gets the height of the current form $ (document). Height () Gets the current document Heights var bot = 50; Bot is the height of the bottom distance if (bot + $ (window). scrolltop ()) >= ($ (document). Height ()-$ (window). Height ()) { When the bottom base distance + scrolling height 〉= The height of the document-the height of the form; We need to load the data asynchronously. $.getjson ("url", {page: "2"}, function (str) {alert (str);}); } }); });

Example

Remove the window scroll bar (add in CSS):

The code is as follows	Copy Code
Body { Overflow-x:hidden; }

After you remove the window scroll bar, drag the table control scroll bar to the far right and still not see the full table.
Solve:

Listens to the scroll method of the control, scrolling the window horizontally when the column's actual width exceeds the width of the window so that you can view the entire table

The code is as follows	Copy Code
Xxx.scroll (function (e) { Xxx.scrollleft ($ (this). ScrollLeft ()); if (Totalwidth > $ (Window). Width ()) { $ (window). ScrollLeft ($ (this). ScrollLeft ()); } })

With jquery, this event scroll can view jquery api:http://api.jquery.com/scroll/

However, there is a flaw in the scroll event that only the scroll bar can be judged, not the event when the scroll bar stops scrolling.

Now use jquery to extend the scroll event and add

Not much to say, directly on the code point.

The code is as follows

Copy Code

(function () { var special = jQuery.event.special, UID1 = ' D ' + (+new Date ()), Uid2 = ' D ' + (+new Date () + 1); Special.scrollstart = { Setup:function () { var timer, Handler = function (evt) { var _self = this, _args = arguments; if (timer) { Cleartimeout (timer); } else { Evt.type = ' Scrollstart '; JQuery.event.handle.apply (_self, _args); } Timer = settimeout (function () { timer = null; }, Special.scrollstop.latency); }; JQuery (This). bind (' scroll ', handler). Data (uid1, handler); }, Teardown:function () { jquery (This). Unbind (' scroll ', jquery (this). Data (UID1)); } }; Special.scrollstop = { LATENCY:300, Setup:function () { var timer, Handler = function (evt) { var _self = this, _args = arguments; if (timer) { Cleartimeout (timer); } Timer = settimeout (function () { timer = null; Evt.type = ' scrollstop '; JQuery.event.handle.apply (_self, _args); }, Special.scrollstop.latency); }; JQuery (This). bind (' scroll ', handler). Data (Uid2, handler); }, Teardown:function () { jquery (This). Unbind (' scroll ', jquery (this). Data (UID2)); } }; })();

You can save the above code to a file, which is equivalent to a plugin, hehe. The method is invoked as follows:

The code is as follows	Copy Code
(function () { JQuery (window). bind (' Scrollstart ', function () { Console.log ("Start"); }); JQuery (window). bind (' Scrollstop ', function (e) { Console.log ("End"); }); })();