前幾天項目需求，就是常見的移動端頁面，點擊出現半透明遮罩，遮罩上面有新彈出的窗體，窗體內部有滾動內容，但是會導致遮罩后面的主體頁面也發生滾動。參考了張鑫旭大神的方法，自己寫了個相對簡單的，今天把思路整理一下。（因為大神總是考慮的東西比較多，而我們就把場景限定在解決這一個問題之下）。
因業務代碼不能上傳，同時只要說明白問題就好，頁面就不做過多雕琢啦。下面是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上測試通過。水平所限，有什么疏漏還請大家不吝賜教，期待共同進步！
