jquery determines the direction of the page scroll bar (scroll)

Project background

Webtouch (WebApp) page, anti-Apple mobile Safari browser, online slide, bottom navigation disappears, slide to the bottom and appear again. Slide down and the bottom navigation appears.

Encounter problems

1, I started with Swipeup and Swipedown to do, found that because there is a scroll bar, does not trigger. So you can only tell if the scroll bar is rolled up and down. About mobile phone gestures, the following article will be introduced, welcome attention!

2, by rolling down to let the bottom of the navigation display or therefore, Android's browser is OK, but Apple Safari will flash, because Apple Safari automatically has a bounce effect, causing the event to repeat, the solution is to roll down a distance, scroll to a certain distance to return to the roll or roll down.

Simply judging the direction of the scroll bar

function Scroll (FN) {
var beforescrolltop = Document.body.scrollTop,
fn = fn | | function () {};
Window.addeventlistener ("Scroll", function () {
var afterscrolltop = Document.body.scrollTop,
Delta = afterscrolltop-beforescrolltop;
if (delta = = 0) return false;
fn (Delta > 0?) "Down": "Up");
Beforescrolltop = Afterscrolltop;
}, False);
}

Call Method:

Scroll (function (direction) {Console.log (direction)});

The above method mobile phone Apple browser event will bounce, solution and code improvements

Scrolldirect:function (FN) {
var beforescrolltop = Document.body.scrollTop;
fn = fn | | function () {
};
Window.addeventlistener ("Scroll", function (event) {
Event = Event | | window.event;

var afterscrolltop = Document.body.scrollTop;
Delta = afterscrolltop-beforescrolltop;
Beforescrolltop = Afterscrolltop;

var scrolltop = $ (this). ScrollTop ();
var scrollheight = $ (document). Height ();
var WindowHeight = $ (this). Height ();
if (scrolltop + windowheight > scrollHeight-10) {//Scroll to bottom execution event
fn (' up ');
Return
}
if (Afterscrolltop < | | afterscrolltop > $ (document.body). height-10) {
fn (' up ');
} else {
if (Math.Abs (delta) < 10) {
return false;
}
fn (Delta > 0?) "Down": "Up");
}
}, False);
}

Call Method:

var upflag=1;
var downflag= 1;
Scroll slide, slide up and down only to perform once!
Scrolldirect (function (direction) {
if (direction = "Down") {
if (Downflag) {
$ (". Footer_wrap"). Slideup (200);
Downflag = 0;
Upflag = 1;
}
}
if (Direction = = "Up") {
if (Upflag) {
$ (". Footer_wrap"). Slidedown (200);
Downflag = 1;
Upflag = 0;
}
}
});

scroll bar scrolling bottom and head judgment

In fact, I have the above function has been judged, and then listed below! Look at the following function!

Bottomjumppage:function () {
var scrolltop = $ (this). ScrollTop ();
var scrollheight = $ (document). Height ();
var WindowHeight = $ (this). Height ();
if (scrolltop + windowheight = = scrollheight) {//scroll to bottom to execute event
Console.dir ("I got to the bottom");

}
if (scrolltop = = 0) {//scroll to head to execute event
Console.dir ("I went to the head");

}
}

Call Method:

$ (window). Scroll (bottomjumppage);

You can also refer to the following methods for scrolling to the bottom of the page and the head

The various heights of jquery

First, say $ (document) and $ (window), as follows:

$ (document). Height ()//high of the entire page
$ (window). height ();//Browser Visual window Heights
$ (window). scrolltop ();//The height of the top of the browser's visual window from the top of the page (vertical offset)
A word to understand is: when the Web scroll bar to the lowest end,

$ (document). Height () = = $ (window). Height () + $ (window). scrolltop ().
Note that it is pulled to the lowest end!

$ (document) when the page is not high enough for the browser window. Height () returns $ (window). Height ()

If you want to get the height of the entire page, it is not recommended to use $ ("html"). Height (), $ ("body")

Reason:

$ ("body"). Height (): The body may have a border, the height of which will be higher than $ (document). Height () Small, $ ("html"). Height (): The height of the different browsers to get the meaning of the difference will be, in other ways, the browser is incompatible.

Here, referring to borders and margin and padding, we naturally think of the other two heights of jquery, namely Innerheight () and Outerheight ()

Innerheight () and outerheight () are not available for window and document objects, and you can use. Height () instead for window and document objects. Innerheight () and outerheight () are used primarily to get the height of the label.

Innerheight ()

Innerheight: Height + filler

Outerheight: Height + filler + border, when parameter is true: Height + filler + border + margin
Innerheight (value)

This "value" argument can be a string (number plus unit) or a number, and jquery automatically adds pixel units (px) If the "value" parameter only provides a number. If you supply only one string, any valid CSS dimensions can be assigned a height (like 100px, 50%, or Auto). Note that in modern browsers, CSS height attributes do not contain padding, border, or margin unless the BOX-SIZINGCSS attribute is applied.

The various heights of JavaScript

Page visible area wide: document.body.clientWidth
Page visible Area High: document.body.clientHeight
Web page Visible area wide: document.body.offsetWidth (including edge width)
Page visible Area High: document.body.offsetHeight (including edge height)
Page body Full text width: document.body.scrollWidth
The full text of the Web page High: document.body.scrollHeight
Web pages are rolled up high: Document.body.scrollTop
Pages were rolled away to the left: Document.body.scrollLeft
Web page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available Workspace height: window.screen.availHeight
Screen available workspace width: window.screen.availWidth

Conclusion

Note that in the use of jquery innerheight () and Outerheight (), there may be browser compatibility issues, different browsers appear different heights, in short, the practice of truth, you can test, write a few small demo, summed up!