jquery determines whether the page scroll bar (scroll) is rolled up or down and scrolled to the head or bottom

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

Encounter problems

1, I started with Swipeup and Swipedown to do, found that because there are scroll bar, will not trigger. So you can only judge that 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 so, Android above the browser can be, but Apple Safari will flash a 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 after the return is roll up or roll.

Simply judging the direction of the scroll bar

JS Code

2. function Scroll (FN) {
4. var beforescrolltop = Document.body.scrollTop,
6. fn = fn | |  function () {};
8. Window.addeventlistener ("scroll", function () {
10. var afterscrolltop = Document.body.scrollTop,
12. Delta = afterscrolltop-beforescrolltop;
14. if (delta = = 0) return false;
16. fn (Delta > 0?)  "Down ": "up");
18. Beforescrolltop = Afterscrolltop;
20. }, false);
22. }

Call Method:

JS Code

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

Above method phone Apple browser event will bounce, workaround and code to improve JS code

2. Scrolldirect: function (fn) {
4. var beforescrolltop = Document.body.scrollTop;
6. fn = fn | | function () {
8. };
10. Window.addeventlistener ("scroll", function (event) {
12. Event = Event | | window.event;
16. var afterscrolltop = Document.body.scrollTop;
18. Delta = afterscrolltop-beforescrolltop;
20. Beforescrolltop = Afterscrolltop;
24. var scrolltop = $ (this). scrolltop ();
26. var scrollheight = $ (document). Height ();
28. var windowheight = $ (this). Height ();
30. if (scrolltop + windowheight > scrollHeight-10) { //scroll to bottom execution event
32. fn (' up ');
34. return;
36. }
38. if (Afterscrolltop < | | afterscrolltop > $ (document.body). height-10) {
40. fn (' up ');
42. } Else {
44. if (Math.Abs (delta) <) {
46. return false;
48. }
50. fn (Delta > 0?)  "Down ": "up");
52. }
54. }, false);
56. }

Call Method:

JS Code

2. var upflag=1;
4. var downflag= 1;
6. //scroll Slide, slide up and slide only once!
8. Crolldirect (function (direction) {
10. if (Direction = = "Down") {
12. if (downflag) {
14. $ (". Footer_wrap"). Slideup (200);
16. Downflag = 0;
18. Upflag = 1;
20. }
22. }
24. if (Direction = = "Up") {
26. if (upflag) {
28. $ (". Footer_wrap"). Slidedown (200);
30. Downflag = 1;
32. Upflag = 0;
34. }
36. }
38. });

Scroll bar Scroll to the bottom and head to judge

In fact, I have the above function has been judged, the following list! Look at the following function!

JS Code

2. Bottomjumppage: function () {
4. var scrolltop = $ (this). scrolltop ();
6. var scrollheight = $ (document). Height ();
8. var windowheight = $ (this). Height ();
10. if (scrolltop + windowheight = = scrollheight) { //scroll to bottom execution event
12. Console.dir ("I went to the bottom");
16. }
18. if (scrolltop = = 0) { //scroll to the head of the execution event
20. Console.dir ("I went to the head");
24. }
26. }

Call Method:

JS Code

$ (window). Scroll (bottomjumppage);

jquery determines whether the page scroll bar (scroll) is rolled up or down and scrolled to the head or bottom