前言?

之前有個項目是運行在移動端Web，和微信H5中，由于默認的彈窗UI不太好看，而且還不統(tǒng)一，所以頁面需要自定義彈窗，添加icon、提示信息、操作按扭等樣式。

?

問題描述：

如果在頁面內容的高度超過了可視區(qū)就會出滾動條，這時觸發(fā)示顯彈窗就會出現(xiàn)頁面的穿透事件，在彈窗上滑動時 或?彈窗中還可以滑動時滑動，這時底層原頁面也會跟著滑動，并且如果剛好點擊到底層原頁面的某個功能按扭也會觸發(fā)其事件。

?

解決辦法：

1、使用fastclick.js插件庫，下載地址：https://www.bootcdn.cn/fastclick

2、自建代碼，在打開自定義彈窗時觸發(fā)事件（取消事件默認動作），禁止底層滾動（使其沒有滾動條），而在關閉自定義彈窗時，再還原其動作即可。

?

彈窗CSS樣式布局：

這里只給出背景層和彈窗的樣式，其他如icon、提示、操作按扭等，可根據(jù)項目需求自定義！

.alert-box{position: fixed; top: 0; right: 0; bottom: 0;left: 0; display: flex; justify-content: center; align-items: center;background: rgba(255, 255, 255, 0.8);z-index: 1024; }.alert-box .alert{overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;transition: all 1s cubic-bezier(.79,-0.54,.31,1.44); }

?

彈窗觸發(fā)對應JS事件：

注：如果要用在 Angular.js、React.js Vue.js中，只需按照其對應的語法改造即可！

// 取消事件的默認動作 function scroll(event) {var evt = event || window.event;evt.preventDefault(); } // 打開自定義彈窗時show() function show() {document.body.style.overflow = 'hidden';document.body.style.position = 'fixed';document.body.style.width = '100%';document.addEventListener("touchmove", scroll, false); };// 關閉自定義彈窗時close() function close() {document.body.style.overflow = 'initial';document.body.style.position = 'initial';document.removeEventListener("touchmove", scroll, false); };// 在微信小程序中類似情況，只需在自定義彈窗元素上添加如下指令即可 fixed="true" catchtouchmove="true"

?

總結

以上是生活随笔為你收集整理的微信H5、移动端自定义弹窗事件穿透、底层页面滑动解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。