??最近在做小程序項(xiàng)目的時(shí)候，因?yàn)橐粋€(gè)彈窗滾動事件，造成了「頁面穿透」。簡單解釋一下這個(gè)現(xiàn)象，就是底部頁面是一個(gè)可以滾動的頁面，有一個(gè)絕對定位為fixed的彈窗，這個(gè)彈窗內(nèi)也是可以滾動的，然后在我們滾動彈窗的時(shí)候，發(fā)現(xiàn)彈窗內(nèi)和底部內(nèi)容都一起滾動，這顯然不是我們想要的效果。效果如下圖：
??這是為啥呢？我們想要的效果應(yīng)該是滾動彈窗的時(shí)候，不會影響外層的滾動，這就是「頁面滾動穿透」了，我上網(wǎng)查了下，似乎。。。。這是微信小程序的BUG，是一個(gè)大坑。。。不過還是有一些解決方法的。
<!--index.wxml-->
<view class="outer-content">
outer contentouter contentouter contentouter contentouter contentouter contentouter contentouter content
<view class="inner-content">
inner-content inner-content inner-content inner-content inner-content inner-contentinner-content inner-content inner-contentinner-content inner-content inner-contentinner-content inner-content inner-content
inner-content inner-content inner-content inner-content inner-content inner-contentinner-content inner-content inner-contentinner-content inner-content inner-contentinner-content inner-content inner-content
inner-content inner-content inner-content inner-content inner-content inner-contentinner-content inner-content inner-contentinner-content inner-content inner-contentinner-content inner-content inner-content
</view>
</view>
同時(shí)我們也記錄下在「微信開發(fā)者工具」上的效果。上拉彈出層的內(nèi)容，只有在彈出層觸底后，才會在底層頁面進(jìn)行滑動，并且不影響彈出層內(nèi)滑動。
然后網(wǎng)上搜索總結(jié)了下解決方案：
方案一：增加「catchtouchmove」屬性
??這種情況下是在「inner」層增加一個(gè)「catchtouchmove」。不過增加后，在彈窗層滑動，發(fā)現(xiàn)彈窗層和底層頁面都不能滑動，所以此方案適合：彈窗層不需要滑動的情況。
方案二：可以在彈出層出現(xiàn)的時(shí)候，給底層增加一個(gè)class，然后彈出層消失的時(shí)候去除這個(gè)class。
??這個(gè)class的主要特點(diǎn)就是將底層設(shè)置了一個(gè)絕對定位fixed。但是這里有個(gè)bug，就是如果底層滑動了一部分，彈出層出現(xiàn)后，底層會跳回頂部。這個(gè)就很不友好了，因?yàn)槲覀兿胍氖菑棾鰧映霈F(xiàn)，底部沒有變化也不能滑動。
樣式和效果圖如下：
.tripList_root {
top:0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
z-index: 0;
}
「微信開發(fā)者工具」和真機(jī)上效果相同。
方案三：使用<scroll-view>標(biāo)簽
??為了達(dá)到理想效果，后來發(fā)現(xiàn)「scroll-view」標(biāo)簽是可以實(shí)現(xiàn)的。同時(shí)記得加上「scroll-y」屬性，就可以上下滑動了，效果如下。
不過在「微信開發(fā)者工具」上效果不同，在彈出層滑到頂部或者底部，再次滑動則會影響到底部頁面。效果如下：
以上是我對小項(xiàng)目完成一個(gè)功能時(shí)的記錄，但是同樣引起了我的思考。
問題一：在彈出層添加屬性「catchtouchmove」，明明是為了防止彈出層的「touchmove」冒泡影響到底層的滑動，而且彈出層的內(nèi)容是超出顯示區(qū)域的，為啥彈出層不能滑動了？
??答：還是自己對「catchtouchmove」的認(rèn)知不夠全面，查詢資料和對實(shí)際效果的認(rèn)識之后，「catchtouchmove」應(yīng)該不僅會阻止事件的冒泡，還會阻止事件的默認(rèn)行為，相當(dāng)于preventDefault.所以彈出層不能滑動了。
問題二：既然微信小程序有「頁面滾動穿透」的坑，其他頁面是不是也有呢？于是開始嘗試手機(jī)端的web頁面。
