详解滑动穿透(锁body)终极探索


Posted in Javascript onApril 16, 2019

场景

当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。

详解滑动穿透(锁body)终极探索

如图所示,浮层下边的内容并没有如想象中不受影响。

解决

先去github上搜索一番,发现有解决此问题的开源包,简单粗暴直接挑选了其中star的最高的(body-scroll-lock)操作一番!
使用后发现有一些问题:

  1. 安卓端全挂
  2. ios端偶尔会有锁不住的情况

查源码发现该包在iOS端使用禁止touchmove的方式单独处理,但是在其他端只是给body加overflow: hidden简单处理。
于是决定写一个针对多端通用的包来处理类似的问题。

 探索一:overflow: hidden

看到下边的滚动肯定立刻就想到了是整个viewport的滚动,那么如果给body设置overflow: hidden,此时body的内容就只有一屏了,肯定不会滚动了;

body { overflow: hidden; }

此方案在pc端完美解决了我们的问题,然而事情并没有那么简单;

再试试移动端:

详解滑动穿透(锁body)终极探索

移动端中并没有出现期待的效果。。。

既然pc端已经有了完美的方案,下边我们继续探索移动端的解决方案。

探索二:body定位

上边想到给body设置overflow: hidden在移动端并不能解决我们的问题,是否在于body的height没有设置

  1. 将html、body的高度都设置为100%;
  2. 给body设置绝对定位(fixed);

同时使用这两个操作似乎完美满足了我们的需求;

详解滑动穿透(锁body)终极探索

但是如图所示,每次都会将页面拉到最顶上的位置,这样看起来又不完美了;

既然使用了定位,那么给一个top值不就定位到我们想要的位置了(聪明如我)。

tips: body 设置 relative 定位会页面自身拉上去,下边留白

多次实验发现这个方案在android端中完美达到了我们想要的结果,但是在ios端并不理想;每次定位的时候会有闪动的问题;好事多磨,接着探索ios端的方案。

探索三:禁止touchmove

如果禁止掉页面的touchmove是否可行呢?话不多说就是干!
当弹出浮层的时候禁掉页面元素的touchmove

document.addEventListener('touchmove', function (event) {
  event.preventDefault()
})

测试发现没有达到想象中的效果,感觉这个结果并不能接受啊,禁止document 的touchmove都不能禁止滚动的吗?
进一步的探索后发现原因竟是这个属性

passive addEventListener第三个参数中传入

原来是浏览器做的一些优化,chrome passive-event-listeners
Passive Event Listeners是Chrome提出的一个新的浏览器特性:Web开发者通过一个新的属性passive来告诉浏览器,当前页面内注册的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为,以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候,代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为,Chrome浏览器称这类型的监听器为被动(passive)监听器。
知道问题就好说了,给addEventListener传入第三个参数

document.addEventListener('touchmove', function (event) {
  event.preventDefault()
}, { passive: false })

大功告成! 突然想到,如果浮层中还需要滚动那就不GG了! so,是不是可以有选择性的禁止滚动(在浮层中元素滚动到最顶部或者最底部之后禁止滚动)。 单独处理浮层中需要滚动的元素;

targetElement.ontouchmove = function (event) {
  const clientY = event.targetTouches[0].clientY - initialClientY

  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
    return preventDefault(event)
  }

  if (targetElement && (targetElement.scrollHeight - 1 - targetElement.scrollTop <= targetElement.clientHeight) && clientY < 0) {
    return preventDefault(event)
  }

  event.stopPropagation()
  return true
}

这个方案在ios中完美实现,但是在 android中还是有一点问题;浮层内容拉到最顶部或者最底部的时候依然会带动页面的内容有一定程度的移动。

详解滑动穿透(锁body)终极探索

tua-body-scroll-lock

终极方案来啦!

tua-body-scroll-lock即是在ios、android和PC各个端单独处理,保证在每个端都可以实现完美的效果!

demo

安装

$ npm i -S tua-body-scroll-lock
# OR
$ yarn add tua-body-scroll-lock

使用

移动端

import { lock, unlock } from 'tua-body-scroll-lock'

// 禁止滑动后还需要内部可以滚动的元素(针对移动端ios处理)
const targetElement = document.querySelector("#someElementId");

lock(targetElement)
unlock(targetElement)

PC端

tips: PC端不需要targetElement, 不传targetElement也不想要控制台提示可以传null

import { lock, unlock } from 'tua-body-scroll-lock'

lock()
unlock()

以上所述是小编给大家介绍的滑动穿透(锁body)详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
详解angular中的作用域及继承
May 31 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 #Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 #Javascript
理理Vue细节(推荐)
Apr 16 #Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 #Javascript
js实现删除li标签一行内容
Apr 16 #Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 #Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 #Javascript
You might like
PHP4实际应用经验篇(2)
2006/10/09 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php创建无限级树型菜单
2015/11/05 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
Sea.JS知识总结
2016/05/05 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
layui实现三级联动效果
2019/07/26 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
Python之web模板应用
2017/12/26 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
python日志logging模块使用方法分析
2019/05/23 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
教师师德演讲稿
2014/05/06 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
本溪水洞导游词
2015/02/11 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
如何用python绘制雷达图
2021/04/24 Python
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
python三子棋游戏
2022/05/04 Python