場(chǎng)景概述

彈窗是一種常見(jiàn)的交互方式，而蒙層是彈窗必不可少的元素，用于隔斷頁(yè)面與彈窗區(qū)塊，暫時(shí)阻斷頁(yè)面的交互。但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)，再繼續(xù)滑動(dòng)，蒙層底部的頁(yè)面會(huì)開始滾動(dòng)，顯然這不是我們想要的效果，因此需要阻止這種行為。

方案分析

方案一

打開蒙層時(shí)，給body添加樣式：

overflow: hidden;
height: 100%;

在某些機(jī)型下，你可能還需要給根節(jié)點(diǎn)添加樣式：

overflow: hidden;

關(guān)閉蒙層時(shí)，移除以上樣式。
優(yōu)點(diǎn)：簡(jiǎn)單方便，只需添加css樣式，沒(méi)有復(fù)雜的邏輯。
缺點(diǎn)：兼容性不好，適用于pc，移動(dòng)端就尷尬了。 部分安卓機(jī)型以及safari中，無(wú)法阻止底部頁(yè)面滾動(dòng)。

方案二

利用移動(dòng)端的touch事件，來(lái)阻止默認(rèn)行為（這里可以理解為頁(yè)面滾動(dòng)就是默認(rèn)行為）。

// node為蒙層容器dom節(jié)點(diǎn)
node.addEventListener('touchstart', e => {
  e.preventDefault()
}, false)

簡(jiǎn)單粗暴，滾動(dòng)時(shí)底部頁(yè)面也無(wú)法動(dòng)彈了。假如你的蒙層內(nèi)容不會(huì)有滾動(dòng)條，那么上述方法 prefect。
但是，假如蒙層內(nèi)容有滾動(dòng)條的話，那么它再也無(wú)法動(dòng)彈了。因此我們需要寫一些js邏輯來(lái)判斷要不要阻止默認(rèn)行為，復(fù)雜程度明顯增加。
具體思路：判定蒙層內(nèi)容是否滾動(dòng)到盡頭，是則阻止默認(rèn)行為，反之任它橫行。
Tip：這里我發(fā)現(xiàn)了一個(gè)小技巧，可以省略不少代碼。在一次滑動(dòng)中，若蒙層內(nèi)容可以滾動(dòng)，則蒙層內(nèi)容滾動(dòng)，過(guò)程中即使蒙層內(nèi)容已滾至盡頭，只要不松手（可以理解為touchend事件觸發(fā)前），繼續(xù)滑動(dòng)時(shí)頁(yè)面內(nèi)容不會(huì)滾動(dòng)，此時(shí)若松手再繼續(xù)滾動(dòng)，則頁(yè)面內(nèi)容會(huì)滾動(dòng)。利用這一個(gè)小技巧，我們可以精簡(jiǎn)優(yōu)化我們的代碼邏輯。

<div class="page">
  <!-- 這里多添加一些，直至出現(xiàn)滾動(dòng)條 -->
  <p>頁(yè)面</p>
  <p>頁(yè)面</p>
  <button class="btn">打開蒙層</button>
  <p>頁(yè)面</p>
</div>
<div class="container">
  <div class="layer"></div>
  <div class="content">
    <!-- 這里多添加一些，直至出現(xiàn)滾動(dòng)條 -->
    <p>蒙層</p>
    <p>蒙層</p>
    <p>蒙層</p>
  </div>
</div>

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;
}
// js
const btnNode = document.querySelector('.btn')
const containerNode = document.querySelector('.container')
const layerNode = document.querySelector('.layer')
const contentNode = document.querySelector('.content')
let startY = 0 // 記錄開始滑動(dòng)的坐標(biāo)，用于判斷滑動(dòng)方向
let status = 0 // 0：未開始，1：已開始，2：滑動(dòng)中
// 打開蒙層
btnNode.addEventListener('click', () => {
  containerNode.style.display = 'block'
}, false)
// 蒙層部分始終阻止默認(rèn)行為
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 // 內(nèi)容可視高度
  let sh = t.scrollHeight // 內(nèi)容滾動(dòng)高度
  let st = t.scrollTop // 當(dāng)前滾動(dòng)高度
  // 已經(jīng)到頭部盡頭了還要向上滑動(dòng)，阻止它
  if (st === 0 && startY < py) {
    e.preventDefault()
  }
  // 已經(jīng)到低部盡頭了還要向下滑動(dòng)，阻止它
  if ((st === sh - ch) && startY > py) {
    e.preventDefault()
  }
}, false)
contentNode.addEventListener('touchend', e => {
  status = 0
}, false)

touch事件判定比較復(fù)雜。

方案三

既然我們要阻止頁(yè)面滾動(dòng)，那么何不將其固定在視窗（即position: fixed），這樣它就無(wú)法滾動(dòng)了，當(dāng)蒙層關(guān)閉時(shí)再釋放。 當(dāng)然還有一些細(xì)節(jié)要考慮，將頁(yè)面固定視窗后，內(nèi)容會(huì)回頭最頂端，這里我們需要記錄一下，同步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
  }
}

思考總結(jié)

若應(yīng)用場(chǎng)景是pc，推薦方案一，真的是不要太方便
若應(yīng)用場(chǎng)景是h5，可以采用方案二
若應(yīng)用場(chǎng)景是全平臺(tái)，那么方案三你不容錯(cuò)過(guò)