彈出 fixed 彈窗后,在彈窗上滑動會導致下層的頁面一起跟着滾動。
場景1:彈窗內無滾動內容
可以在彈窗最外層元素綁定touchmove事件,觸發事件返回false即(在vue類框架中也可以加.stop阻止冒泡)。
簡單寫法:catchtouchmove='true'
此種方式會阻止彈窗內內容的滾動。
場景二:彈窗內有滾動內容
在彈窗外層根元素動態添加一個no-scroll樣式,定義no-scroll為{height: 100%; overflow: hidden;}
當需要阻止滑動的彈窗顯示時添加no-scroll,彈窗關閉去掉no-scroll即可。
此種方式的缺點是當彈窗顯示增加no-scrll后彈窗下面的頁面會回到頂部。