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>