js-禁止长页面滚动

标题的需求问题其实我经常遇到。尤其是在碰到页面同时出现有视频及弹层的情况。

当然我说的问题皆是针对微信H5开发的哈

IOS中,视频播放,弹层出现时,视频在弹层的下面,不会出现问题;

安卓手机中,完了,视频播放,弹层出现,视频在弹层的上方,完了完了,此时我们的解决办法前提是页面很长,足够视频的位置未出现在我们能看到的界面中,此时弹层出现了。那我们这时就禁止页面滚动,方式视频再次进入我们的视线界面中。

不多说,方法如下:

var yazi=function(e){e.preventDefault();};
    function stop(){
	 document.body.style.overflow='hidden';        
         document.addEventListener("touchmove",yazi,false);//禁止页面滑动
    }
/***取消滑动限制***/
   function move(){
	 document.body.style.overflow='';//出现滚动条
	 document.removeEventListener("touchmove",yazi,false);        
  }

  

posted @ 2019-08-09 16:10  MiniDuck  阅读(1396)  评论(0编辑  收藏  举报