前幾天遇到移動端頁面穿透問題相信很多人也遇到過相應的情況    這個問題特別頑固  電腦端用谷歌移動介面測試沒有問題 但是安卓 ios 還是會有問題  而且安卓 和 ios 下面兩種放法  支援還不一樣導致這個問題弄了很久    

內容有點多請詳細閱讀！！！！

就像這個情況 滑動答案的時候 答案到了底部繼續滑動 題乾的頁面也會跟著滑動 為了解決這個問題 也上網找了很多相關問題 但是都沒有解決  

網上好多說用阻止預設事件 但是加上這個屬性 會讓本身也滑動不了 所以這個就放棄

然後用了另一種方法 就是滑動答案的時候 讓題幹部分 fixed  如下面的程式碼

我會將上面頁面說成上層   穿透下面的頁面說成下層  記住方便閱讀

記住要用touchstart   用touchmove  和end  還會出現穿透的問題  在開始的時候直接將題幹定位fiexed

subjectiveList 是上層的頁面  這個裡面的body是我的下層頁面是body所以這麼寫  你需要根據你自己的情況對應著改一下 

這段程式碼就是滑動上層頁面的時候將下層頁面fixed  將top賦值下層頁面當前的scrolltop的值 為了儲存你之前滑動的位置

然後在你下層的定位fixed的dom節點上新增一個屬性儲存它的scrolltop的值 

因為你滑動下層的時候需要把原來的scrolltop還原  

這段是滑動下層頁面的時候講下層定位以及scrolltop還原 

到這基本就解決了    然而並沒有！！！！！！

這個方法在安卓上完美解決但是  在ios上會出現各種神奇的bug  滑動頁面亂跳 會讓你懷疑人生  然後就有了第二種方法的探尋之路  

第二種方法思路  我們上層頁面滑動到底部或者頂部的時候  才會影響到 下層的頁面  所以就有了想法  如果滑動到最底部 就阻止上層頁面的預設事件  下層就不會動了  但是有了阻止預設事件上層頁面也劃不動  

這個方法都是操作上層頁面 不用去理會下層頁面 

touchstart不用去看這個是我解決別的問題

在touchmove的時候看是否為最上端或者最底端

scrolltop==0的時候是最上端

阻止預設事件  因為阻止預設事件之後就滑動不了  所以滑動結束之後給scrolltop賦值了個1  為了下次滑動時候還能繼續滑動 而且賦值個1 不會影響使用 看不出來  

$(".subjectiveList").scrollTop() + $(".subjectiveList").height() >= $(".subjectiveList")[0].scrollHeight  這個是判斷是不是最下端然後將scrolltop減1 也是為了防止下次滑不動

這個方法ios完美執行 但是安卓滑動上層的時候下層會閃動！！！！！！

所以綜合以上兩種方法 總結了一個兩種結合的方法

先判斷手機的機型是什麼 然後進入對應的程式碼 

純原創第一次寫如果解決你的問題請給個贊