美文网首页
关于h5界面手机端和pc禁止滑动问题

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

作者: 你的名字97 | 来源:发表于2019-06-13 10:52 被阅读0次

    最近要写一个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);

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


    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/jjdjfctx.html