详解滑动穿透(锁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 相关文章推荐
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
vue 全局环境切换问题
Oct 27 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
JavaScript小技巧带你提升你的代码技能
Sep 15 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
简单的用PHP编写的导航条程序
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php二维数组排序详解
2013/11/06 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
python 网络编程详解及简单实例
2017/04/25 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python坐标线性插值应用实现
2019/11/13 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
企业挂职心得体会
2014/09/10 职场文书
个人租房协议书范本
2014/09/30 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
人民检察院起诉书
2015/05/20 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server