原文:彈出遮罩層后,如何禁止底層頁面的滾動

彈窗是一種常見的交互方式,而蒙層則是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的交互。但是,我們會發現,當彈出遮罩層后,底層body的內容也是可以滾動,顯然這不是我們想要的效果,而這個問題就是小萌最近開發項目時遇到的問題。 一個小程序的項目,是用MPVUE 一個使用 Vue.js 開發小程序的前端框架 做的。其中有做一個詳情頁面領取優惠券的功能。點擊領取按鈕,優惠券列表從底部滑出,有 ...

2018-09-10 09:34 2 8244 推薦指數:

查看詳情

模態框彈出滾動 底層頁面禁止滾屏 ?

這段時間做的項目 昨天被老板發現了這個滾屏的問題 解釋下 標題 不知道我有沒有說明白 就是 你點擊事件引發 modal彈出 在你的彈出框沒有消失之前 你滾動你的鼠標發現了一個很x疼的問題 就是 你的最底層的屏幕還是可以滾動的 改吧 ! 其實很簡單 就是在你的彈出框事件發生 ...

Wed Dec 27 02:52:00 CST 2017 0 1936
彈出遮罩禁止滾動效果

彈出遮罩,手指在手機上上下滑動 遮罩下的頁面出現滑動。下面代碼解決這個問題 (1)觸摸不產生事件 (2)body不出現滾動條 $("body,.main").height($(window).height()).css({ "overflow-y ...

Sat Dec 31 22:46:00 CST 2016 0 4834
移動端和PC端彈出遮罩,頁面禁止滾動的解決方法及探究

PC端解決方案 pc端的解決思路就是在彈出遮罩的時候取消已經存在的滾動條,達到無法滾動的效果。 也就是說給body添加overflow:hidden屬性即可,IE6、7下不會生效,需要給html增加overflow:hidden屬性。 要制作這個效果在PC端非常簡單,只需要設置 ...

Thu Apr 25 01:48:00 CST 2019 0 1141
web頁面彈出遮罩,通過js或css禁止底部頁面跟隨滾動

場景概述 彈窗是一種常見的交互方式,而蒙是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的交互。但是,在蒙元素中滑動的時候,滑到內容的盡頭時,再繼續滑動,蒙底部的頁面會開始滾動,顯然這不是我們想要的效果,因此需要阻止這種行為。 那么,如何阻止呢?請看以下分析: 方案分析 ...

Tue Jun 02 18:53:00 CST 2020 0 1474
遮罩禁止頁面滾動

// 封裝禁止頁面滾動方法(該方法兼容PC端和移動端)var topSpace = 0function BodyScroll (isState) { var bodyDoc = document.body if (isState) {topSpace = window.scrollYbodyDoc ...

Wed Sep 04 01:46:00 CST 2019 0 1308
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM