移動(dòng)端解決彈出層滑動(dòng)到底部后，繼續(xù)滑動(dòng)會(huì)帶動(dòng)主頁(yè)面滑動(dòng)的問(wèn)題。
1，問(wèn)題：彈出層有滑動(dòng)的內(nèi)容，滑動(dòng)到底部后，繼續(xù)滑動(dòng)會(huì)觸發(fā)主頁(yè)面也滑動(dòng)，向上滑動(dòng)也會(huì)出現(xiàn)此問(wèn)題
2，解決：如果彈出層是全覆蓋主頁(yè)面，那就好辦了，直接出現(xiàn)彈出層時(shí)，主頁(yè)面高度設(shè)為100vh,overflow設(shè)為hidden，關(guān)閉彈出層時(shí)，則主頁(yè)面恢復(fù)正常設(shè)置。能達(dá)到效果。如果彈出層未全覆蓋主頁(yè)面，就不能那么做了，需要利用e.preventDefault()來(lái)阻止滑動(dòng)事件，這需要判斷何時(shí)阻止，何時(shí)不阻止，那就是判斷彈出層是否滑到最底部或者最頂部，利用容器高度clientHeight和內(nèi)容物高度scrollHeight之差可得到彈出層的最大滑動(dòng)距離，達(dá)到后，可阻止默認(rèn)事件，解決問(wèn)題。
<script>
? ?
let init = {
?
data: {? //數(shù)據(jù)初始化? ? ? ? ? ?
startY: 0, ? ? ? ? ? ?//觸摸到窗體時(shí)垂直位置標(biāo)記（touchstart）
? ? ? ? ? ?startScrollTop: 0, ? ?//每次觸摸窗體時(shí)的滾動(dòng)距離（touchstart）
? ? ? ? ? ?endScrollTop: 0, ? ? ?//元素當(dāng)前的滾動(dòng)距離（touchmove）
? ? ? ? ? ?maxScroll: 0 ? ? ? ? ?//下邊緣距離（元素滾動(dòng)maxScroll就到底啦）
? ? ? ?
},?
/touchstart發(fā)生的事件?
begin: function (event) {? ?
?init.data.startY = event.targetTouches[0].pageY;? ?init.data.startScrollTop = event.currentTarget.scrollTop;? init.data.maxScroll = this.scrollHeight - this.clientHeight; //下邊緣距離（元素滾動(dòng)maxScroll就到底啦
$(this).on('touchmove', init.move);
},
?//touchmove發(fā)生的事件
? ? ??
?move: function (event) {
? ? ? ? ??
?let endScrollTop = this.scrollTop;
? ? ? ? ? ?
let endY = event.targetTouches[0].pageY; ? //元素當(dāng)前的垂直位置標(biāo)記，與觸摸到窗體時(shí)垂直位置標(biāo)記相差來(lái)確定向上滑還是向下滑
? ? ? ? ? ?
let direction = endY - init.data.startY; ??
?if(direction > 0 && endScrollTop === 0){
? ? ? ? ? ? ? ?
init.zuzhi(); //向上滑并且當(dāng)前的滾動(dòng)距離為0，說(shuō)明到達(dá)上邊緣，阻止默認(rèn)事件
? ? ? ? ? ?}
? ? ? ? ??
?if(direction < 0 && endScrollTop + 1 >= init.data.maxScroll){
? ? ? ? ? ? ? ?init.zuzhi(); //向下滑并且當(dāng)前的滾動(dòng)距離即將達(dá)到endScrollTop，說(shuō)明即將到達(dá)下邊緣，阻止默認(rèn)事件
? ? ? ? ??
?}
? ? ? ? ? ?
$(this).on('touchend', init.end);
? ??
? ?},
? ? ?
?end: function () {
? ? ? ? ?
??init.data.maxScroll = 0;
? ?
?? ?},
? ??
? ?zuzhi: function (e) {
? ??
? ? ? ?event.preventDefault();
? ? ? ?
? ? ? ?return;
??},? ? ? ?
</script>
