最近在做项目时遇到一个问题,百思不得其解,如有大神知道答案,恳请回复。
原生app内嵌H5时遇到的问题,具体业务不细说了,主要想实现的功能是
在h5页面点击后实现禁止touchmove,再次点击后恢复touchmove,可是奇怪的是在ios的scrollview中如果禁止了touchmove,就无法恢复touchmove,在safri浏览器就没问题,具体操作的禁止与恢复操作是这么写的
var preHandler = function(e){
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
}
document.addEventListener('touchmove', preHandler, false);
document.removeEventListener('touchmove', preHandler, false);
如有大神知晓,万望赐教
============
=============
========
==========
==================
==============
=================
==============
=============
===========
最近同事给出了个方案还不错,有需要的同学可以看下
// 有遮罩层时禁止背景滚动
export const _disScroll = (flag) => {
let body = document.getElementsByTagName('body')[0];
if(flag){
let _top = document.body.scrollTop || document.documentElement.scrollTop;
body.className.indexOf('overflowHide') < 0 ? body.style.top = (-1 * _top) + 'px' : '';
body.className = body.className + ' overflowHide';
}else{
var _top = parseFloat(body.style.top)*-1 || 0;
body.className = body.className.replace('overflowHide','');
body.className.indexOf('overflowHide') < 0 ? body.style.top = 0 + 'px' : '';
window.scrollTo(0, _top);
}
}
.overflowHide {
position: fixed;
top: 0;
left: 0;
width: 100%;
}