場景概述
彈窗是一種常見的互動方式,而蒙層是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的互動。但是,在蒙層元素中滑動的時候,滑到內容的盡頭時,再繼續滑動,蒙層底部的頁面會開始滾動,顯然這不是我們想要的效果,因此需要阻止這種行為。
那麼,如何阻止呢?請看以下分析:
方案分析
方案一
- 開啟蒙層時,給body新增樣式:
overflow: hidden;
height: 100%;
複製程式碼
在某些機型下,你可能還需要給根節點新增樣式:
overflow: hidden;
複製程式碼
- 關閉蒙層時,移除以上樣式。
優點: 簡單方便,只需新增css樣式,沒有複雜的邏輯。
缺點: 相容性不好,適用於pc,移動端就尷尬了。 部分安卓機型以及safari中,無法無法阻止底部頁面滾動。
如果需要應用於移動端,那麼你可能需要方案二。
方案二
就是利用移動端的touch事件,來阻止預設行為(這裡可以理解為頁面滾動就是預設行為)。
// node為蒙層容器dom節點
node.addEventListener('touchstart', e => {
e.preventDefault()
}, false)
複製程式碼
簡單粗暴,滾動時底部頁面也無法動彈了。假如你的蒙層內容不會有滾動條,那麼上述方法prefect。
但是,最怕空氣突然安靜,假如蒙層內容有滾動條的話,那麼它再也無法動彈了。因此我們需要寫一些js邏輯來判斷要不要阻止預設行為,複雜程度明顯增加。
具體思路:判定蒙層內容是否滾動到盡頭,是則阻止預設行為,反之任它橫行。
示例程式碼如下:
<body>
<div class="page">
<!-- 這裡多新增一些,直至出現滾動條 -->
<p>頁面</p>
<p>頁面</p>
<button class="btn">開啟蒙層</button>
<p>頁面</p>
</div>
<div class="container">
<div class="layer"></div>
<div class="content">
<!-- 這裡多新增一些,直至出現滾動條 -->
<p>蒙層</p>
<p>蒙層</p>
<p>蒙層</p>
</div>
</div>
</body>
複製程式碼
body {
margin: 0;
padding: 20px;
}
.btn {
border: none;
outline: none;
font-size: inherit;
border-radius: 4px;
padding: 1em;
width: 100%;
margin: 1em 0;
color: #fff;
background-color: #ff5777;
}
.container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1001;
display: none;
}
.layer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background-color: rgba(0, 0, 0, .3);
}
.content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
z-index: 2;
background-color: #f6f6f6;
overflow-y: auto;
}
複製程式碼
const btnNode = document.querySelector('.btn')
const containerNode = document.querySelector('.container')
const layerNode = document.querySelector('.layer')
const contentNode = document.querySelector('.content')
let startY = 0 // 記錄開始滑動的座標,用於判斷滑動方向
let status = 0 // 0:未開始,1:已開始,2:滑動中
// 開啟蒙層
btnNode.addEventListener('click', () => {
containerNode.style.display = 'block'
}, false)
// 蒙層部分始終阻止預設行為
layerNode.addEventListener('touchstart', e => {
e.preventDefault()
}, false)
// 核心部分
contentNode.addEventListener('touchstart', e => {
status = 1
startY = e.targetTouches[0].pageY
}, false)
contentNode.addEventListener('touchmove', e => {
// 判定一次就夠了
if (status !== 1) return
status = 2
let t = e.target || e.srcElement
let py = e.targetTouches[0].pageY
let ch = t.clientHeight // 內容可視高度
let sh = t.scrollHeight // 內容滾動高度
let st = t.scrollTop // 當前滾動高度
// 已經到頭部盡頭了還要向上滑動,阻止它
if (st === 0 && startY < py) {
e.preventDefault()
}
// 已經到低部盡頭了還要向下滑動,阻止它
if ((st === sh - ch) && startY > py) {
e.preventDefault()
}
}, false)
contentNode.addEventListener('touchend', e => {
status = 0
}, false)
複製程式碼
問題雖然是解決了,但是回頭來看,複雜程度和程式碼量明顯增加了一個梯度。 本著簡單方便的原則,我們是不是還可以探索其他的方案呢?
既然touch事件判定比較複雜,何不跳出這個框框,另闢蹊徑,探索更加合適的方案。 於是,便有了我們的方案三。
方案三
來講講我的思路,既然我們要阻止頁面滾動,那麼何不將其固定在視窗(即position: fixed
),這樣它就無法滾動了,當蒙層關閉時再釋放。
當然還有一些細節要考慮,將頁面固定視窗後,內容會回頭最頂端,這裡我們需要記錄一下,同步top值。
示例程式碼:
let bodyEl = document.body
let top = 0
function stopBodyScroll (isFixed) {
if (isFixed) {
top = window.scrollY
bodyEl.style.position = 'fixed'
bodyEl.style.top = -top + 'px'
} else {
bodyEl.style.position = ''
bodyEl.style.top = ''
window.scrollTo(0, top) // 回到原先的top
}
}
複製程式碼
思考總結
- 若應用場景是pc,推薦方案一,真的是不要太方便
- 若應用場景是h5,你可以採用方案二,但是我建議你採用方案三
- 若應用場景是全平臺,那麼方案三你不容錯過
本文到這裡也即將結束了,在這裡我強烈推薦一下方案三,原因在於簡單、方便、相容性好,一次封裝,永久受用。