夏日博客

A-A+

jquery实现手机网站div层滑动的例子

2016年01月11日 前端设计 暂无评论 阅读 5 views 次

本文章介绍是的利用一个问题来告诉我们实现在手机中网站的一个滚动效果，这个例子的重点就是手机网站表层div滑动，导致底层body滑动（touchmove的阻止），具体如下。
body很长，可以滑动，body头部有一个模拟下拉的选择框,下拉选择有滚动轴.

enter image description here

我给body一个overflow：hidden和高度是没有用的。手机网站上背景还是可以滑动，然后我给body一个touchmove的preventdefault()阻止事件，body滑动组织了，PC上面是可以了，但是手机上面滑动div还是会导致底部body的滑动，我给div 一个阻止冒泡的事件stopPropagation()，手机网站上面还是不可以。

关于preventdefault和stopPropagation，后面有时间会讲解其区别。

解决方案:

我经过反复测试，返现滚动轴滚到底部的时候，会触发body的滑动，那么我就在事件滚到底部的时候对表层的div做一个touchmove的阻止。到达滚动轴底部，向下滑动，阻止事件，向上滑动，开启事件。为此就要判断touchmove的方向了。

  1. $("body").on("touchstart", function(e) {  
  2.     e.preventDefault();  
  3.     startX = e.originalEvent.changedTouches[0].pageX,  
  4.     startY = e.originalEvent.changedTouches[0].pageY;  
  5. });  
  6. $("body").on("touchmove", function(e) {  
  7.     e.preventDefault();  
  8.     moveEndX = e.originalEvent.changedTouches[0].pageX,  
  9.     moveEndY = e.originalEvent.changedTouches[0].pageY,  
  10.     X = moveEndX - startX,  
  11.     Y = moveEndY - startY;  
  12.     if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {  
  13.         alert("left 2 right");  
  14.     }  
  15.     else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {  
  16.         alert("right 2 left");  
  17.     }  
  18.     else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {  
  19.         alert("top 2 bottom");  
  20.     }  
  21.     else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {  
  22.         alert("bottom 2 top");  
  23.     }  
  24.     else{  
  25.         alert("just touch");  
  26.     }  
  27. });  

上面的方法是判断touchmove的滑动方向。

  1. $('#haorooms底层背景').bind("touchmove", function (e) {  
  2.        e.preventDefault();  
  3.    });  
  4.    $(".滚动的父亲").bind("touchstart", function (events) {  
  5.        startY = events.originalEvent.changedTouches[0].pageY;  
  6.    });  
  7.    $(".滚动的父亲 ul").bind("touchmove", function (e) {  
  8.        var ulheight = $(this).height();  
  9.        var scrollTop = $(this).scrollTop();  
  10.        var scrollheight = $(this)[0].scrollHeight;  
  11.        if (ulheight + scrollTop + 20 >= scrollheight) { //滚到底部20px左右  
  12.            $(".滚动的父亲").bind("touchmove", function (event) {  
  13.                moveEndY = event.originalEvent.changedTouches[0].pageY,  
  14.                        theY = moveEndY - startY;  
  15.                if (theY > 0) { //用上面的abs()更加准确！  
  16.                    $(".滚动的父亲").unbind("touchmove");  
  17.                }  
  18.                if (theY < 0) {  
  19.                    event.preventDefault();  
  20.                }  
  21.            })  
  22.        }  
  23.        if (scrollTop < 20) {//滚到顶部20px左右  
  24.            $(".滚动的父亲").bind("touchmove", function (event) {  
  25.                moveEndY = event.originalEvent.changedTouches[0].pageY,  
  26.                        theY = moveEndY - startY;  
  27.                if (theY > 0) {  
  28.                    event.preventDefault();  
  29.                }  
  30.                if (theY < 0) {  
  31.                    $(".滚动的父亲").unbind("touchmove");  
  32.                }  
  33.            })  
  34.        }  
  35.    });  
标签：

给我留言