详解滑动穿透(锁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 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
JavaScript常用工具函数大全
May 06 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
微信小程序实现倒计时功能
Nov 19 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 获取全局变量的代码
2011/04/21 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
php工具型代码之印章抠图
2018/07/18 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
怎么清空javascript数组
2013/05/11 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
python 元组的使用方法
2020/06/09 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
分厂厂长岗位职责
2013/12/29 职场文书
社团个人总结范文
2015/03/05 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫