小程序彈窗阻止滑動的兩種方法


彈出 fixed 彈窗后,在彈窗上滑動會導致下層的頁面一起跟着滾動。

場景1:彈窗內無滾動內容

可以在彈窗最外層元素綁定touchmove事件,觸發事件返回false即(在vue類框架中也可以加.stop阻止冒泡)。

簡單寫法:catchtouchmove='true'

此種方式會阻止彈窗內內容的滾動。

場景二:彈窗內有滾動內容

在彈窗外層根元素動態添加一個no-scroll樣式,定義no-scroll為{height: 100%; overflow: hidden;}

當需要阻止滑動的彈窗顯示時添加no-scroll,彈窗關閉去掉no-scroll即可。

此種方式的缺點是當彈窗顯示增加no-scrll后彈窗下面的頁面會回到頂部。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM