详解滑动穿透(锁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 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 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添加MySQL数据记录代码
2008/06/07 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
php中JSON的使用方法
2015/04/30 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
JS 控制非法字符的输入代码
2009/12/04 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python实现点对点聊天程序
2018/07/28 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
新闻专业本科生的自我评价分享
2013/11/20 职场文书
校长先进事迹材料
2014/02/01 职场文书
超越自我演讲稿
2014/05/21 职场文书
行政管理专业求职信
2014/07/06 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
2014年财政所工作总结
2014/11/22 职场文书
2015年暑期见闻
2015/07/14 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
python中的被动信息搜集
2021/04/29 Python
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
Python 数据科学 Matplotlib图库详解
2021/07/07 Python