禁止遮罩層以下螢幕滑動

2021-09-02 22:32:59 字數 459 閱讀 6731

在web開發時,常有彈窗 + 蒙層遮罩的需求,這時遮罩下頁面往往是可以滑動的,為了良好的客戶體驗,頁面的滑動需要被禁止

根據彈窗的內容是否可以滑動,有2種不同的方式可供處理:

1) 彈窗內容不滑動

$('html,body').on("touchmove",function(e) )
2) 彈窗內容滑動

body,html//需要設定的樣式

/*彈窗顯示時***/   

var  ruletop = '';

$('.rule').click(function());

/*彈窗隱藏時***/   

var  ruletop = '';

$('.rule').click(function());

Vue 彈出層時 禁止頁面滑動

上 滑動限制 stop document.body.style.overflow hidden document.addeventlistener touchmove mo,false 禁止頁面滑動 取消滑動限制 move document.body.style.overflow 出現滾動條 doc...

移動端蒙層底部頁面禁止滑動

蒙層 蒙層居中,且底部div禁止滑動。container style 因為不同螢幕高度不同,且字型大小不同content高度也不同,所以高度在js中控制。用 代替document.queryselector,節省重複 var function selector 彈出框 function show p...

移動端篩選欄區域性滑動,遮罩層等不滾動

列表篩選欄 要求是遮罩層出現時候 篩選列表右側有三個切換列表可以滾動,其他部分不可以 試了很多方法,最後的解決方法是 滾動列表父盒子固定高度,新增屬性 overflow y scroll 出現時 document.body.style.position fixed document.body.sty...