国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

立即前往

首頁(yè)/文章專(zhuān)欄/禁止蒙層底部頁(yè)面跟隨滾動(dòng)

禁止蒙層底部頁(yè)面跟隨滾動(dòng)

shiyang6017 發(fā)布于2019-08-02 15:59 / 3092人閱讀

摘要：但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)，再繼續(xù)滑動(dòng)，蒙層底部的頁(yè)面會(huì)開(kāi)始滾動(dòng)，顯然這不是我們想要的效果，因此需要阻止這種行為。部分安卓機(jī)型以及中，無(wú)法無(wú)法阻止底部頁(yè)面滾動(dòng)。為蒙層容器節(jié)點(diǎn)簡(jiǎn)單粗暴，滾動(dòng)時(shí)底部頁(yè)面也無(wú)法動(dòng)彈了。

場(chǎng)景概述

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

那么，如何阻止呢？請(qǐng)看以下分析：

方案分析 方案一

打開(kāi)蒙層時(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ú)法無(wú)法阻止底部頁(yè)面滾動(dòng)。

如果需要應(yīng)用于移動(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)彈了。因此我們需要寫(xiě)一些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)化我們的代碼邏輯。

示例代碼如下：


  
    
    頁(yè)面
    頁(yè)面
    
    頁(yè)面
  
  
    
    
      
      蒙層
      蒙層
      蒙層

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 // 記錄開(kāi)始滑動(dòng)的坐標(biāo)，用于判斷滑動(dòng)方向
let status = 0 // 0：未開(kāi)始，1：已開(kāi)始，2：滑動(dòng)中

// 打開(kāi)蒙層
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)

問(wèn)題雖然是解決了，但是回頭來(lái)看，復(fù)雜程度和代碼量明顯增加了一個(gè)梯度。
本著簡(jiǎn)單方便的原則，我們是不是還可以探索其他的方案呢？

既然touch事件判定比較復(fù)雜，何不跳出這個(gè)框框，另辟蹊徑，探索更加合適的方案。
于是，便有了我們的方案三。

方案三

來(lái)講講我的思路，既然我們要阻止頁(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ò)

本文到這里也即將結(jié)束了，在這里我強(qiáng)烈推薦一下方案三，原因在于簡(jiǎn)單、方便、兼容性好，一次封裝，永久受用。