利用模拟滚动条解决移动页面双浮层时背景层滑动问题

问题说明

双浮层demo地址：

浮层内容高度超出浮层既定高度（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');
            }); 

        }        
    }

个人博客:
进击的程序茗