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

当然我说的问题皆是针对微信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);
}

  

js-禁止长页面滚动的更多相关文章

  1. js 禁止/允许页面滚动

    参考:https://blog.csdn.net/huangfu_chunfeng/article/details/46429997         https://www.cnblogs.com/w ...

  2. js禁止浏览器页面后退功能

    js禁止浏览器页面后退功能: <script> $(function(){ ) { //防止页面后退 history.pushState(null, null, document.URL) ...

  3. js禁止复制页面文字

    做项目的时候有客户提出要求,不能用用户浏览他发表的文章时复制他的文章 一种比较简单的方法,禁止用户选中页面的文字和禁止用户右键菜单 document.oncontextmenu = new Funct ...

  4. aos.js超赞页面滚动元素动画jQuery动画库

    插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...

  5. 使用JS方法使页面滚动到指定元素+优化+API介绍(动画)

    前言 当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现. 目录 使用的API简介 初版 ...

  6. 【VUE/JS】vue和js禁止浏览器页面后退

    1.vue 禁止浏览器后退需求是:需要某个路由不能通过浏览器返回,同时不影响相互之间的切换整理一下解决方法 和 使用方法: 1.在路由配置中给这个路由添加meta信息,比如: { path: '/ho ...

  7. 帆软报表(finereport)JS实现长页面锚点定位

    在报表的应用需求中,页面过长时,需要页面中实现类似HTML中锚点功能以跳转到相应需要预览模块 1实现思路 在设计器中所做的操作最终都会以HTML形式展现在网页.在这里我们为报表块单元格加上id选择器配 ...

  8. JS禁止WEB页面鼠标事件大全

    <!--禁止鼠标右键代码-->:<noscript><ifra:<scriptlanguage=javas:<!--:if(window.Event):doc ...

  9. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

随机推荐

  1. js随机验证码

    随机验证码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  2. Ajax加载数据后百度分享实例

    <script type="text/javascript"> //百度分享 function baidu_share() { var title_val = $(&q ...

  3. python2和3的一些区别,编码方式

    python2与python3的区别: #python2 print() print'abc' #range() xrange()生成器 #raw_input()#python3 #print('ab ...

  4. C Makefile初学基础

    # this is make file hello.out: max.o min.o hello.c gcc max.o min.o hello.c -o hello.out max.o:max.c ...

  5. Linux下Centos7对外开放端口

    转载:https://blog.csdn.net/realjh/article/details/82048492 命令集合: ()查看对外开放的端口状态 查询已开放的端口 netstat -anp 查 ...

  6. git log 详解 以及代码量统计

    https://git-scm.com/book/zh/v1/Git-%E5%9F%BA%E7%A1%80-%E6%9F%A5%E7%9C%8B%E6%8F%90%E4%BA%A4%E5%8E%86% ...

  7. DevOps书单:调研了101名专家,推荐这39本必读书籍

    任何一个领域都遵循从新人到熟手,从熟手到专家的路径.在成长过程中,DevOps人经常会陷入没人带,没人管,找不到职业方向的迷茫. DevOps是在商业演进与企业协作的进化过程中诞生的一个全新职业,被很 ...

  8. ThinkPHP生成静态页buildHtml方法

    原来ThinkPHP自带了生成静态页的函数buildHtml,使用起来很方便!最新的手册里没写这个方法,向大家介绍一下. PHP 1 2 3 4 5 6 7 8 9 10 11     protect ...

  9. 如何在vue中引入图片?

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一. 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 ...

  10. 关于下拉框的onchange事件和onclick选择value值。

    下拉框的onchange事件和onclick,一般最好都选择onchange事件,onclick可能会不兼容有些浏览器. 下面是代码: <!DOCTYPE html><html la ...