详解滑动穿透(锁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 相关文章推荐
ajax异步刷新实现更新数据库
Dec 03 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
JScript中的条件注释详解
Apr 24 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
详解原生js实现offset方法
Jun 15 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 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/06/24 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
php防止sql注入的方法详解
2017/02/20 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
javascript实现下雨效果
2017/03/27 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
神经网络python源码分享
2017/12/15 Python
python字符串循环左移
2019/03/08 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Python可以实现栈的结构吗
2020/05/27 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
介绍Ibatis的核心类
2013/11/18 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
什么是lambda函数
2013/09/17 面试题
opencv实现图像几何变换
2021/03/24 Python
中专自荐信
2013/10/13 职场文书
银行出纳岗位职责
2013/11/25 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
保护黄河倡议书
2014/05/16 职场文书
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers