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

当然我说的问题皆是针对微信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. webpack 中如何使用 vue

    1. 安装vue的包: cnpm i vue -S 2. 由于 在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件的 loader cnpm i vu ...

  2. C++函数声明与定义

    一个C++函数,如果没有函数声明而只有函数定义,程序照样运行,但要求这个函数定义必须放在main函数之前,否则编译按照从上到下的顺序扫描下来,就会出现编译器不认识它的情况. 如果一个程序同时有函数声明 ...

  3. 【Thinkphp5】解决模板输出时间戳自动转换为时间格式的问题

    背景: 数据库存储时间为时间戳,格式为varchar,模板输出时未进行时间格式化却输出了时间格式 如下图 (数据库存储的时间戳) (页面输出的时间) (未进行格式化的时间代码) (格式化后的时间代码) ...

  4. CentOS 7 查看硬盘情况

    用命令: lsblk                                  查看分区和磁盘 df -h                                        查看整 ...

  5. 020-VMware虚拟机作为OpenStack计算节点,上面的虚拟机无法启动问题解决

      问题描述: VMware虚拟机作为OpenStack计算节点,如果安装的操作系统是CentOS7.3,则在此计算节点放置的虚拟机无法正常启动,报如下错误: 在创建计算节点时,为了能让 KVM 能创 ...

  6. Revolver Maps-3D地球仪网站定制

    这是个网站统计的小插件,大家可以看到那些国家,哪些城市对本网站进行了访问,很直观的一种表现方式. 这个小插件不需要你写任何代码,只需要去它官方网站定制你自己需要的代码.它的地址是:http://www ...

  7. BOM-window

    窗口位置 screenLeft和screenTop screenLeft 和 screenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置.Firefox 则在screenX 和 screen ...

  8. php.ini中时区设置不成功解决方法

    一.在php.ini的[Date]中加入 [Date] date_default_timezone_set('UTC'); date.timezone = "Asia/Shanghai&qu ...

  9. 带加载进度的Web图片懒加载组件Lazyload

    在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验. Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏 ...

  10. Spring Batch Hello World

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11995146.html Project Directory Maven Dependency < ...