ios系統滾動穿透

上一篇也提到過 滾動穿透的例子

這次的場景不一樣

結構是彈窗篩選框，篩選維度多一些會出現滾動條，內容少一些就沒有滾動條

　　　　　　　　　　　　　　

 

 

問題1 

ios系統里手指放到底部的黑遮布上滾動，發現底部的頁面可以被滾動，這時直接禁止掉 在div上加@touchmove.prevent  （上一篇提過）

問題2

如果彈出框內容較少時，沒有撐出滾動條情況下，手指繼續滾動會出現底部內容滾動（滾動穿透）

　　　　　　　　　　　　　　

 

 

解決方式

 

 => 如果篩選框不含滾動就直接@touchmove.prevent就可以

 

=> 動態包含滾動條的彈窗穿透問題解決思路是：判斷篩選框是否撐出滾動條，如果是，設置禁止滾動事件，否則正常

 

代碼如下

篩選框滾動內容的最外層div 添加touchmove事件

 

 

 

 

 

 

ps： 我看到很多例子是用下面代碼   我嘗試了  並沒有效果 ，如果單獨配置到含有滾動條的頁面感覺不是很有共性，所以自己研究了上面的解決方式，不知道會不會有其他bug。如果有，歡迎一起討論，扔磚指正 

bodyScroll (event) {
      event.preventDefault()
    },
    /**
     * 禁止頁面滾動，解決彈框出現時 IOS 上滾動穿透的問題
     */
    forbidBodyScroll () {
      document.getElementsByTagName('body')[0].addEventListener('touchmove', this.bodyScroll, false)
    },
    /**
     * 解除禁止滾動，解決彈框出現時 IOS 上滾動穿透的問題
     */
    allowBodyScroll () {
      document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.bodyScroll, false)
    },