使用css代码可以禁止网页滚动,但是会使浏览器窗口的滚动条消失。而js代码则可以让页面禁止滚动的同时,保留滚动条的显示状态,而且滚动条的位置不变。

javascript代码

var keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

function preventDefault(e) {

e = e || window.event;

if (e.preventDefault)

e.preventDefault();

e.returnValue = false;

}

function preventDefaultForScrollKeys(e) {

if (keys[e.keyCode]) {

preventDefault(e);

return false;

}

}

var oldonwheel, oldonmousewheel1, oldonmousewheel2, oldontouchmove, oldonkeydown

, isDisabled;

function disableScroll() {

if (window.addEventListener) // older FF

window.addEventListener('DOMMouseScroll', preventDefault, false);

oldonwheel = window.onwheel;

window.onwheel = preventDefault; // modern standard

oldonmousewheel1 = window.onmousewheel;

window.onmousewheel = preventDefault; // older browsers, IE

oldonmousewheel2 = document.onmousewheel;

document.onmousewheel = preventDefault; // older browsers, IE

oldontouchmove = window.ontouchmove;

window.ontouchmove = preventDefault; // mobile

oldonkeydown = document.onkeydown;

document.onkeydown = preventDefaultForScrollKeys;

isDisabled = true;

}

function enableScroll() {

if (!isDisabled) return;

if (window.removeEventListener)

window.removeEventListener('DOMMouseScroll', preventDefault, false);

window.onwheel = oldonwheel; // modern standard

window.onmousewheel = oldonmousewheel1; // older browsers, IE

document.onmousewheel = oldonmousewheel2; // older browsers, IE

window.ontouchmove = oldontouchmove; // mobile

document.onkeydown = oldonkeydown;

isDisabled = false;

}

window.scrollHanlder = {

disableScroll: disableScroll,

enableScroll: enableScroll

};

调用代码

禁止滚动时,调用:

disableScroll()

恢复滚动时,调用函数:

enableScroll()

存在的问题

会导致弹窗的滚动也禁止,需要拖动滚动条;

测试后好像不兼容Chrome浏览器。

html js 禁用浏览器上下滑动,原生javascript实现禁止浏览器滚动,滚动条不消失代码...相关推荐

  1. 非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...

    这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 ...

  2. 【JS案例】分页器——使用原生JavaScript实现

       在使用vue编写完一个分页器组件后,我对分页器的底层逻辑产生了兴趣,想在此组件的基础上再深入了解一些分页器的底层逻辑,了解vue与原生js的区别.我在github上看了一些大神写的分页器,属实牛 ...

  3. php通过js发送请求数据,使用原生javascript发送ajax请求数据的步骤

    注:请求地址是自己的项目地址,请自行更改.这只是一个简单的原生XMLHttpRequst的使用,之后会发如何封装原生ajax实现jequery的ajax 第一步:创建xhr对象.const xhr = ...

  4. 原生js获取document_常见的原生javascript DOM操作

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

  5. android浏览器音频播放器,javascript – 在Android浏览器中播放html5音频

    我有一个JavaScript在浏览器中播放音频,使用html5< audio>标签.它在iPhone浏览器中工作正常,但不在Android中. (使用Android 2.1测试使用htc愿 ...

  6. js正则替换html标签内容,JavaScript正则替换HTML标签功能的示例代码分享

    1.说明 获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2.实现JavaScript代码 function deleteTag() {     var regx ...

  7. html图片点击左右滑动效果,jQuery点击左右滚动产品图片展示代码

    基于jQuery的产品图文展示代码,可实现点击左右滚动,自动滚动.动态效果还不错.基于jQuery的产品图文展示jQuery插件stepcarousel.js. 配置注意下面几处的ID,要与HTML结 ...

  8. WEB前端 从原生JavaScript到MVVM

    在了解MVVM之前,我们先回顾一下前端发展的历史阶段,做到心中有数,才会更好理解. 这段回顾历史,由于网上就可查不少资料,但都篇幅很长,晦涩难懂. 所以我引用了 廖雪峰老师网站总结的一段话,言简意骇, ...

  9. 加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】

    作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...

  10. mysql插入ㄖ_原生JavaScript代码100个实例

    1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...

最新文章

  1. 机器学习竞赛实际上是一场数据竞赛
  2. 强化学习(十七) 基于模型的强化学习与Dyna算法框架
  3. “面试不败计划”:面试题基础二
  4. linux下uvc协议访问usb摄像头,Ubuntu调用USB摄像头
  5. oracle 双结点监听文件,RAC监听服务两个节点 只能起一个
  6. 一个小老板从小公司创业开始做起的过程记录
  7. 【java】对象变成垃圾被垃圾回收器gc收回前执行的操作:Object类的protected void finalize() throws Throwable...
  8. Seata多微服务互相调用_全局分布式事物使用案例_Order-Module order微服务的配置搭建---微服务升级_SpringCloud Alibaba工作笔记0060
  9. 挑战程序设计竞赛(第2版) 第3章笔记
  10. 五分钟搭建一个MarkDown文档解析器
  11. 10 步让你成为更优秀的Coder
  12. plSQL中修改代码字体的大小
  13. 一文详解|增长那些事儿
  14. mysql 语法 日期转换成字符串_mysql日期转换成字符串的方法
  15. 例题5-3 安迪的第一个字典 UVa10815
  16. 大数据平台运维之Hbase
  17. python之表白神器--组图拼爱心墙
  18. 怎样迁移网站服务器和域名?
  19. 微信多开器 Python窗口编程 隔离运行(一)
  20. Python编写带音效游戏——击球打玻璃块

热门文章

  1. 2013年总结(4)-人脉
  2. 从PCI上读取数据 线程和定时器效率
  3. Linux C/C++开发、嵌入式软件开发面试记录 ( 四)
  4. tomcat老启动不起来问题
  5. 5.Kong入门与实战 基于Nginx和OpenResty的云原生微服务网关 --- Kong 的配置详解
  6. 30.yii2 --- 全文检索简介
  7. 26.卷1(套接字联网API)---线程
  8. 10. zf workflow
  9. 26. 面向对象程序设计
  10. np合并 python_Python办公自动化自动更新不对称表格