技術標籤：專案中問題解決方案整理javascriptjscssvue.jshtml

彈窗底部內容不可滑動解決方案整理

1.如果彈窗內容不可滑動，僅展示

方案一：只需要給彈窗蒙層加上 @touchmove.prevent 即可實現，無相容性問題

方案二：在彈窗蒙層加上touch-action:none; 在iPhone5和ipad上可能會沒有效果

方案三：開啟彈窗時，設定body的overflow屬性為hidden並阻止預設事件

document.body.style.overflow = 'hidden';

var fn = function(e){e.preventDefault(
 
);};

document.addEventListener("touchmove",fn,false);

關閉彈窗時設定body的overflow屬性為""並移除阻止預設事件

document.body.style.overflow ='';

var fn = function(e){e.preventDefault();};

document.removeEventListener("touchmove",fn,false);

在iPhone5和ipad上可能會使整個頁面無法滑動

2.如果彈窗內容也可以滑動

方案：設定一個top為0

開啟彈窗時，記錄top等於當時scrollY的高度,並設定body定位為fixed

top = window.scrollY;

document.body.style.position = 'fixed';

document.body.style.top = -top + 'px';

關閉彈窗時

document.body..style.position = '';

document.body..style.top = '';

window.scrollTo(0,top);

例如活動規則彈窗可以使用這種方案，缺點是頁面固定彈窗後，內容會回到頁面最頂端，關閉彈窗後，頁面回到開啟彈窗的位置。活動規則本身在頂端不會遇見這種問題。