关于h5界面手机端和pc禁止滑动问题

最近要写一个h5的自适应的界面,要求弹框出来的时候禁止滑动的问题

        百度上的资料大部分都是互相摘抄很乱,自己总结了一下其实很简单的问题被他们说的复杂了。

pc端禁止滑动很简单的:

         $('html,body').css("overflow","hidden");

pc只需要让body或者html的css 的overflow属性hidden就行了,恢复滑动的话直接去点这个

  属性就行 $('html,body').css("overflow",""),还有其他方法。

移动端:

大部分的答案

document.addEventListener('touchmove', function(){

e.preventDefault();

}, false);

touchmove是监听手机触摸移动的一个时间当然还会有touchstart等事件,

然而你会发现谷歌会报这个问题


新版的谷歌浏览器preventDefault()不再是清除浏览器默认行为了。document.addEventListener('touchstart', function(event) {

// 判断是否可以被禁用

if(event.cancelable) {

// 判断是否已经被禁用

if(!event.defaultPrevented) {

   event.preventDefault();

        }

}

},false);


当然方法许多如监听滚动事件等等


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容