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