禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否

禁止页面滚动 有三种方法

1,依靠css 将页面

document.documentElement.style.overflow='hidden';

document.body.style.overflow='hidden';//手机版设置这个。

如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效。

但是 你用键盘的 上下左右键,你会发现,页面仍然可以滚动。 别着急 往下看

2,在 1 的基础上 添加 js功能

var move=function(e){

e.preventDefault && e.preventDefault();

e.returnValue=false;

e.stopPropagation && e.stopPropagation();

return false;

}

var keyFunc=function(e){

if(37<=e.keyCode && e.keyCode<=40){

return move(e);

}

}

document.body.οnkeydοwn=keyFunc;

好了 ,到了这里,你会发现页面木有任何问题了。鼠标,键盘 都不能将页面滚动。

不过....对于高级用户来说,仍然有问题,比如 继续往下看

3,假设用户希望 滚动条 一直处于显示状态 肿么办捏???? ok ,继续

var st

var scroll=function(e){

clearTimeout(st);

st=setTimeout(function(){

window.scrollTo(loc.scrollLeft,loc.scrollTop);

},5);

}

window.οnscrοll=scroll;

上述代码 可以似的 用户的任何滚动操作,都将被还原。注意这个方式很消耗内存(虽然做了setTimeout),但是谁让需求比较二逼呢对吧~

感谢分享https://www.cnblogs.com/lxg0/p/5779451.html

H5禁止页面滑动/滚动相关推荐

  1. uniapp禁止页面上下滚动

    uniapp禁止页面上下滚动 功能场景 第一个方法"app-plus":{"bounce":"none"} 第二个方法 功能场景 我目前是在 ...

  2. 如何去掉微信小程序导航栏,以及禁止页面滑动

    如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...

  3. uni-app - APP平台禁止页面滑动(无法上下滚动屏幕页面)

    前言 注意:仅 APP 平台,在 pages.json 中进行配置. 有些时候,我们需要将页面固定住,让用户无法下拉与滚动页面. 全局配置 在 globalStyle 中进行配置,便是所有页面均有效. ...

  4. uni-app - ios禁止页面滑动(无法上下滚动屏幕页面)

    注意:仅 APP 平台 在 pages.json 中进行配置 有些时候,我们需要将页面固定住,让用户无法下拉与滚动页面. 全局配置 在 globalStyle 中进行配置,便是所有页面均有效.&quo ...

  5. h5禁止页面长按操作_HTML5 对于手机页面长按会粘贴复制的禁用 (解决方案)

    解决方案: 直接在CSS 文件中添加下面的代码,就可以实现了在手机端禁止粘贴复制的功能: *{ -webkit-touch-callout:none;  /*系统默认菜单被禁用*/ -webkit-u ...

  6. H5禁止弹窗页面滚动

    这篇文章讲解一下,弹窗弹出以后,如何禁止页面滑动的技巧. 如下图所示,在"弹窗"弹出后页面是可以滚动的. 解决方案: 第一步: 在点击弹框的事件中添加: $("body& ...

  7. vue弹层时禁止页面滚动

    创建组件时禁止页面滚动: created(){//禁止页面滑动document.body.addEventListener('touchmove', this.bodyScroll, { passiv ...

  8. vue中禁止页面滚动/滚动事件穿透

    1.移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.prevent></div ...

  9. vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决

    弹出层时,蒙版下还可以滚动页面 移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.preve ...

最新文章

  1. C++ 名字重载、隐藏、覆盖
  2. 模拟操作系统动态内存管理(c实现)
  3. fill in icon logic
  4. USACO Training Section 1.1黑色星期五Friday the Thirteenth
  5. 高通董事长:努力降低智能手机价格
  6. springboot starter工作原理_98,谈谈SpringBoot的工作原理
  7. Linux安装的分区问题
  8. https 加端口_Ubuntu 安装Node 10.16 跑 Nodeppt 加Hexo博客再来个为知笔记私有云
  9. 如何升级mysql-libs_MySQL升级教程(CentOS)
  10. (转)量化投资大师采访摘录-詹姆斯·西蒙斯 James Simons
  11. 部署AdminLTE
  12. UML统一建模语言习题一
  13. 非法集资(Illegal Fund-raising)
  14. matlab编程excosxdx求积分,分部积分
  15. 使用WebGL绘制流动虚线
  16. gige相机二次开发_GigE Vision接口摄像机及其应用
  17. jad文件生成工具--jad easy
  18. PTES-渗透测试执行标准
  19. 【今日收获】关于 [Error] name lookup of ‘i‘ changed for ISO ‘for‘ scoping [-fpermissive]的解决方法
  20. 关于安装sqlserver sp4的一些小问题

热门文章

  1. 图解某网贷平台短信验证码程序的实现
  2. 【编译原理】实现一个小型编译程序
  3. 体验 RAD Studio C++ Builder 11.1.5
  4. python实现图书管理系统BookManager类
  5. 房地产CRM实践进入成长期
  6. 智慧城管业务流程系统建设
  7. PCI网卡上扩展ROM编程 4.利用8139C网卡读写EPROM
  8. 根据Modeller官网教程进行单模板建模
  9. Java转大数据开发全套视频资料
  10. C#基础-委托与事件