前几天项目需求，就是常见的移动端页面，点击出现半透明遮罩，遮罩上面有新弹出的窗体，窗体内部有滚动内容，但是会导致遮罩后面的主体页面也发生滚动。参考了张鑫旭大神的方法，自己写了个相对简单的，今天把思路整理一下。（因为大神总是考虑的东西比较多，而我们就把场景限定在解决这一个问题之下）。
因业务代码不能上传，同时只要说明白问题就好，页面就不做过多雕琢啦。下面是HTML结构：
<body>
<p style="border: 1px solid #aaaa55;" id="btn">点击显示遮罩</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<i class="shadow"></i>
<div>
<span>确认选择</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li style="margin: 0;">9</li>
</ul>
</div>
</body>
很简单有木有？一堆P标签是页面默认显示内容，第一个P是显示遮罩的按钮。i标签是半透明遮罩，固定定位宽高100%，left和top值全为0。div是显示在遮罩上面的窗体，固定定位在页面底部，高度比较小（小于内部ul的高度，我这里是50%），overflow设为auto。里面主要是ul>li结构，展示内容；“确认选择“的span标签是用来隐藏遮罩和窗体的（点出来咱还得让它能回去不是？）。页面显示如下：
默认情况下
点击按钮遮罩及弹窗显示
好，页面结构大体如图，主要是JS部分。我们都知道，移动端touch事件的默认行为就是页面的滑动，所以也就造成了我们弹出的窗体滑到底以后，继续下滑会导致页面内容下滑，滑到顶同样如此。那么大体思路就有了（感谢张鑫旭大大）：
- 当手指touchstart的元素是我们不愿意发生滚动的时候，阻止默认行为；
- 当手指touchstart的元素是可滚动的时候，不阻止默认行为；但到达边缘的时候，阻止默认行为；
思路有了，接下来想想该怎么做。想象一个场景，手指点在弹出层窗体上（touchstart），向下滑动（touchmove），到达底部即下边缘（那么怎么判断到了下边缘？），阻止默认事件！向上滑动同理，只不过是在到达上边缘的时候阻止默认事件即可。
整理一下可以发现，我们需要确定的几个值：
1.边缘值。
也就是说我们怎么知道什么时候到上边缘、什么时候到下边缘？答案是通过scrollTop。上边缘好说，scrollTop为0就行了；那么下边缘呢？我们都知道，这个问题的场景就发生在，一个高度较低的盒子里包裹了一个高度比较高的内容。即子元素的高度大于父元素。在我们这里div是那个高度较低（定高50%）的父元素，里面有一个span和一组ul>li结构。这里就需要用到两个概念，一个是clientHeight，一个是scrollHeight。前者是视口大小，就是div能显示的高度（其实就是我们这里设置的50%）；而scrollHeight则是滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）。仔细想想就能知道，用总的内容高减去视口的高度，剩下的就是到达“内容底部”所需要“走过“的距离，也就是说，当我们滚动距离达到这个值时，就“到底”了，即达到下边缘。
2.确定方向。
当触摸到弹出窗体时（touchstart），记录垂直位置startY；当在弹出窗体上滑动时（touchmove），记录当前垂直位置endY，这两个值的差可用来确定页面方向。如果页面向上滚（在这里把能到达上边缘定义为“向上滚”），手指是向下的，则endY减去startY大于0；如果页面向下滚（即能到达下边缘），手指是向上的，则endY减去startY小于0。如此，方向可以确定。
说了这么多，干货来了，JS代码如下（需要引入jQuery）：
<script>
let init = {
data: { //数据初始化
startY: 0, //触摸到窗体时垂直位置标记（touchstart）
startScrollTop: 0, //每次触摸窗体时的滚动距离（touchstart）
endScrollTop: 0, //元素当前的滚动距离（touchmove）
maxScroll: 0 //下边缘距离（元素滚动maxScroll就到底啦）
},
//touchstart发生的事件
begin: function (event) {
init.data.startY = event.targetTouches[0].pageY;
init.data.startScrollTop = event.currentTarget.scrollTop;
init.data.maxScroll = this.scrollHeight - this.clientHeight; //下边缘距离（元素滚动maxScroll就到底啦）
$(this).on('touchmove', init.move);
},
//touchmove发生的事件
move: function (event) {
let endScrollTop = this.scrollTop;
let endY = event.targetTouches[0].pageY; //元素当前的垂直位置标记，与触摸到窗体时垂直位置标记相差来确定向上滑还是向下滑
let direction = endY - init.data.startY; //如上所述，确定方向。
if(direction > 0 && endScrollTop === 0){
init.zuzhi(); //向上滑并且当前的滚动距离为0，说明到达上边缘，阻止默认事件
}
if(direction < 0 && endScrollTop + 1 >= init.data.maxScroll){
init.zuzhi(); //向下滑并且当前的滚动距离即将达到endScrollTop，说明即将到达下边缘，阻止默认事件
}
$(this).on('touchend', init.end);
},
end: function () {
init.data.maxScroll = 0;
},
zuzhi: function (e) {
event.preventDefault();
return;
},
// 通过切换类名来控制遮罩及弹窗的显示隐藏
shadowToggle: function (ele, myclassName) {
$(ele).hasClass(myclassName) ? $(ele).removeClass(myclassName) : $(ele).addClass(myclassName);
},
};
$('div').on('touchstart', init.begin);
$('.shadow').on('touchmove', init.zuzhi);
$('#btn').on('click', function () {
init.shadowToggle('.shadow', 'show');
init.shadowToggle('html', 'noscroll');
init.shadowToggle('div', 'show');
});
$('span').click(function () {
init.shadowToggle('.shadow', 'show');
init.shadowToggle('html', 'noscroll');
init.shadowToggle('div', 'show');
})
</script>
此方案在iPhone7Plus、iPhone6s及小米5、魅族魅蓝note5上测试通过。水平所限，有什么疏漏还请大家不吝赐教，期待共同进步！
网友评论