滾動穿透是指在移動端當有 fixed 遮罩背景和彈出層時,在螢幕上滑動能夠滑動背景下面的內容。網上整理了解決方案,但有些還是存在一定的問題:
123456
.modal-open}
即當彈出層彈出時在html上新增.modal-open,禁用 html 和 body 的滾動條,但實際用上就會發現:
由於 html 和 body的滾動條都被禁用,彈出層後頁面的滾動位置會丟失,需要用 js 來計算原來滾動的位置,在彈出時保持滾動位置;
杯具(>﹏<)的是頁面的背景還是能夠有滾的動的效果
123
modal.addeventlistener('touchmove', function(e), false);
即通過阻止移動端touchmove事件,但實際用上會發現彈出層需要滾動時也會被阻止(>﹏<)
1234
body.modal-open
這種方式同樣當彈出層彈出時滾動條會丟失,所以還需要使用js來儲存滾動條的位置,在關閉彈出層時將滾動位置還原;
1234567
891011
1213
14
var modalhelper = (function(bodycls) ,beforeclose: function()
};})('modal-open');
本人親測確實比較完美解決了移動端滾動問題
關於移動端開發中遇到的坑 vue
modal open 杯具 的是頁面的背景還是能夠有滾的動的效果 modal.addeventlistener touchmove function e false body.modal open var modalhelper function bodycls beforeclose functi...
VUE開發中遇到的坑
1.父元件監聽不到子元件向外觸發的事件,原因可能是 emit傳入的事件名稱只能用小寫,不可以使用駝峰式命名書寫。現版本的 vue 似乎可以支援 2.用非同步傳遞過來的資料做元件的初始化時候,直接用,因為存在非同步問題 延時,結果需在等待過程結束之後才返回 會出現not find props或者渲染出...
vue 移動端的開發
一 cli 的安裝 如果要改變安裝路徑,則 編輯path 新增node.js安裝路徑 如 c program files nodejs 新增環境變數 node path c program files nodejs node modules npm config set prefix c progr...