关闭

web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动

时间: 2017-12-07阅读: 5487标签: web

场景概述

弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想要的效果,因此需要阻止这种行为。

那么,如何阻止呢?请看以下分析:


方案分析

方案一

  • 打开蒙层时,给body添加样式:
overflow: hidden;
height: 100%;

在某些机型下,你可能还需要给根节点添加样式:

overflow: hidden;
  • 关闭蒙层时,移除以上样式。

优点:
简单方便,只需添加css样式,没有复杂的逻辑。

缺点:
兼容性不好,适用于pc,移动端就尴尬了。
部分安卓机型以及safari中,无法无法阻止底部页面滚动。

如果需要应用于移动端,那么你可能需要方案二。


方案二

就是利用移动端的touch事件,来阻止默认行为(这里可以理解为页面滚动就是默认行为)。

// node为蒙层容器dom节点
node.addEventListener('touchstart', e => {
  e.preventDefault()
}, false)

简单粗暴,滚动时底部页面也无法动弹了。假如你的蒙层内容不会有滚动条,那么上述方法prefect。

但是,最怕空气突然安静,假如蒙层内容有滚动条的话,那么它再也无法动弹了。因此我们需要写一些js逻辑来判断要不要阻止默认行为,复杂程度明显增加。

具体思路:判定蒙层内容是否滚动到尽头,是则阻止默认行为,反之任它横行。


Tip:这里我发现了一个小技巧,可以省略不少代码。在一次滑动中,若蒙层内容可以滚动,则蒙层内容滚动,过程中即使蒙层内容已滚至尽头,只要不松手(可以理解为
touchend事件触发前),继续滑动时页面内容不会滚动,此时若松手再继续滚动,则页面内容会滚动。利用这一个小技巧,我们可以精简优化我们的代码逻辑。

示例代码如下:

<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,你可以采用方案二,但是我建议你采用方案三
  • 若应用场景是全平台,那么方案三你不容错过

本文到这里也即将结束了,在这里我强烈推荐一下方案三,原因在于简单、方便、兼容性好,一次封装,永久受用。

来源:https://segmentfault.com/a/1190000012313337
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/228

WebAR 如何改变增强现实的未来

增强现实技术在开发人员和智能手机用户中越来越受欢迎,但它还是没有在无所不在的技术中占据一席之地。要体验 AR,用户必须安装专用的程序,但经常会在用过几次后就将其删除,甚至根本去下载它

成为 Web 开发大师你必须知道的 7 件事情

曾经是这样的,懂点编码,并可以偶尔耍点酷,那么你就会被认为是一个Web开发大师。但是现在,情况再也不是这样的了。Web开发已经朝着主流方向发展,开发人员数量显著增加。

Web认证_介绍Web开发中几种常用的认证机制

如今web服务随处可见,成千上万的web程序被部署到公网上供用户访问,有些系统只针对指定用户开放,属于安全级别较高的web应用,他们需要有一种认证机制以保护系统资源的安全,本文将探讨五种常用的认证机制及优缺点。

让Web应用更安全的13个小技巧

无论你是React、Angular、Vue.js,还是原生JavaScript开发者,你的代码都有可能成为黑客眼中的猎物。作为一个前端开发者,我们可能更加关注性能、SEO、UI/UX,往往会忽视安全问题。

Web UI 自动化测试技术选型

对于 UI 自动化测试来说,许多所谓框架之间并没有太多差别,也从来不是影响整套测试用例是否健壮的关键性因素。相比之下,如何提高测试用例稳定性以及出现错误时 debug 的便捷性才是让 UI 自动化测试方案落地的重要细节。

成为Web开发人员的7个简单步骤

你想成为一名Web开发人员,但现在你面前有这样一个问题,那就是你没有在高科技行业工作的经验。你上了一些课程,也花了时间在个人编码项目上

关于Web应用开发流程的总结

假设最简单的情况,一个开发人员,开发所有的代码,一个测试人员。一个测试的服务器,一个生产的服务器。开发人员需要为公司开发一个项目,开发人员首先分析产品经理的需求,建立相应的模型,然后进行如下步骤:

web负载均衡,几种常见负载均衡比较

当一台服务器无法支持大量用户访问时,将用户分摊到两个或多个服务器上的方法叫负载均衡。负载均衡可以将工作任务分摊到多个处理单元,从而提高并发处理能力。根据实现的原理不同,常见的web负载均衡技术包括:DNS轮询、IP负载均衡和CDN等

web前端开发入门_ web前端需要掌握的知识体系

web前端开发入门的知识体系包括哪些东西呢?大致分为:基本工具使用、比如Git/GitHub,编辑器,调试工具等;静态页面功底;JS与JQuery功底;JS进阶,在无人指导的情况下,看书是一种学习途径。比如《JS高级程序设计》《权威指南》是前端开发者必看书籍。

学习web的方法有哪些

Web技术的参与门槛低,工资高,发展前景良好,已成为近年来的热门岗位,很多IT公司在招聘时都希望招聘会web技术的人员,但是想学好web前端,特别是对于没有基础的初学者来说

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!