问题说明
浮层内容高度超出浮层既定高度（PS：这是前提，如果浮层不需要滚动，就可以return本文了），所以浮层需要滚动，当浮层滚动到底时，再向下滑动，会引起背景层的滚动。为了解决这个问题采用的方法是模拟滚动条，也就是对于浮层则通过捕获touchstart、touchmove、touchend事件来计算手指滑动的距离，使得浮层进行移动。
在通过模拟滚动条来解决问题之前，有试过给背景层加overflow:hidden、试过禁止背景层的touchmove事件，都以失败告终，最后选择了模拟滚动条。
代码说明：
核心代码展示如下：
/*调用说明：noScroll.init('j_s_float',$('.j_s_float'),$('.j_ns_float'));
*@param{
* j_s_float:浮层的class的名字
* $('.j_s_float'):浮层
* $('.j_ns_float'):背景层 }
*/
var noScroll = {
y: 0 ,//手指走过的距离
disY:0,//记录每次touchmove时的初始距离
scrollTop:0,
startBool:false,
init:function(s_float,scroll_float,noscroll_float){
var self = this;
self.touchstart(s_float,scroll_float);
noscroll_float.on("touchmove",function(e){//禁止背景层的滚动
e.preventDefault();
e.stopPropagation();
});
},
touchstart:function(s_float,scroll_float){
var self = this;
if(!self.startBool){
//保证在一次touchstart未结束时，不能开启第二次start，也就是解决两个手指以上会乱跳的问题
scroll_float.bind("touchstart",function(e){
self.y = 0;//手指划过的距离清空
self.startBool = true;
self.scrollTop = scroll_float[0].scrollTop
self.disY =e.changedTouches[0].pageY;
self.touchmove(s_float,scroll_float);
self.touchend(s_float,scroll_float);
});
}
},
touchmove:function(s_float,scroll_float){
var self = this;
scroll_float.bind("touchmove",function(e){
e.preventDefault();
e.stopPropagation();
self.y += e.changedTouches[0].pageY - self.disY;
if(scroll_float.height()+scroll_float.get(0).scrollTop>=scroll_float.get(0).scrollHeight&&self.y<0) {
//滑到底部
self.y = 0;
return;
}else if(scroll_float.get(0).scrollTop === 0&&self.y>0){
//滑到顶部
self.y = 0;
return ;
}else{
self.v0 = (e.changedTouches[0].pageY - self.disY)/5;
scroll_float[0].scrollTop=self.scrollTop-self.y ;
self.disY = e.changedTouches[0].pageY;
}
});
},
touchend:function(s_float,scroll_float){
scroll_float.bind('touchend', function(e) {
scroll_float.unbind('touchmove');
scroll_float.unbind('touchend');
});
}
}
