webtouch（webapp）頁面，防蘋果手機safari瀏覽器，網上滑動，底部導航消失，滑動到底部又出現。向下滑動，底部導航出現。

遇到問題

1、我一開始用swipeup和swipedown來做，發現因為有滾動條，不會觸發。因此只能判斷滾動條是上滾下滾等。關於手機手勢，後面的文章會介紹，歡迎關註！

2、通過上滾下滾來讓底部導航顯示或者因此，安卓上面的瀏覽器都可以，但是蘋果safari會一閃一閃，原因是蘋果safari自動有個彈跳效果，導致事件重復執行，解決辦法是給上滾下滾一個距離，滾動到一定距離後返回是上滾還是下滾。

單純判斷滾動條方向

1. function scroll( fn ) {
2. var beforeScrollTop = document.body.scrollTop,
3. fn = fn || function() {};
4. window.addEventListener("scroll", function() {
5. var afterScrollTop = document.body.scrollTop,
6. delta = afterScrollTop - beforeScrollTop;
7. if( delta === 0 ) return false;
8. fn( delta > 0 ? "down" : "up" );
9. beforeScrollTop = afterScrollTop;
10. }, false);
11. }

調用方法：

1. scroll(function(direction) { console.log(direction) });

以上方法手機蘋果瀏覽器事件會跳動，解決方法及代碼改進

1. scrollDirect: function (fn) {
2. var beforeScrollTop = document.body.scrollTop;
3. fn = fn || function () {
4. };
5. window.addEventListener("scroll", function (event) {
6. event = event || window.event;
8. var afterScrollTop = document.body.scrollTop;
9. delta = afterScrollTop - beforeScrollTop;
10. beforeScrollTop = afterScrollTop;
12. var scrollTop = $(this).scrollTop();
13. var scrollHeight = $(document).height();
14. var windowHeight = $(this).height();
15. if (scrollTop + windowHeight > scrollHeight - 10) { //滾動到底部執行事件
16. fn(‘up‘);
17. return;
18. }
19. if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
20. fn(‘up‘);
21. } else {
22. if (Math.abs(delta) < 10) {
23. return false;
24. }
25. fn(delta > 0 ? "down" : "up");
26. }
27. }, false);
28. }

調用方法：

1. var upflag=1;
2. var downflag= 1;
3. //scroll滑動,上滑和下滑只執行一次！
4. crollDirect(function (direction) {
5. if (direction == "down") {
6. if (downflag) {
7. $(".footer_wrap").slideUp(200);
8. downflag = 0;
9. upflag = 1;
10. }
11. }
12. if (direction == "up") {
13. if (upflag) {
14. $(".footer_wrap").slideDown(200);
15. downflag = 1;
16. upflag = 0;
17. }
18. }
19. });

滾動條滾動到底部和頭部判斷

其實我上面的函數中已經有判斷，下面再列一下！看如下函數！

1. BottomJumpPage: function () {
2. var scrollTop = $(this).scrollTop();
3. var scrollHeight = $(document).height();
4. var windowHeight = $(this).height();
5. if (scrollTop + windowHeight == scrollHeight) { //滾動到底部執行事件
6. console.dir("我到底部了")；
8. }
9. if (scrollTop == 0) { //滾動到頭部部執行事件
10. console.dir("我到頭部了")；
12. }
13. }

調用方法：

1. $(window).scroll(BottomJumpPage);

jquery判斷頁面滾動條(scroll)是上滾還是下滾，且是否滾動到頭部或者底部