html js 禁用浏览器上下滑动,原生javascript实现禁止浏览器滚动,滚动条不消失代码...
使用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实现禁止浏览器滚动,滚动条不消失代码...相关推荐
- 非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 ...
- 【JS案例】分页器——使用原生JavaScript实现
在使用vue编写完一个分页器组件后,我对分页器的底层逻辑产生了兴趣,想在此组件的基础上再深入了解一些分页器的底层逻辑,了解vue与原生js的区别.我在github上看了一些大神写的分页器,属实牛 ...
- php通过js发送请求数据,使用原生javascript发送ajax请求数据的步骤
注:请求地址是自己的项目地址,请自行更改.这只是一个简单的原生XMLHttpRequst的使用,之后会发如何封装原生ajax实现jequery的ajax 第一步:创建xhr对象.const xhr = ...
- 原生js获取document_常见的原生javascript DOM操作
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
- android浏览器音频播放器,javascript – 在Android浏览器中播放html5音频
我有一个JavaScript在浏览器中播放音频,使用html5< audio>标签.它在iPhone浏览器中工作正常,但不在Android中. (使用Android 2.1测试使用htc愿 ...
- js正则替换html标签内容,JavaScript正则替换HTML标签功能的示例代码分享
1.说明 获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2.实现JavaScript代码 function deleteTag() { var regx ...
- html图片点击左右滑动效果,jQuery点击左右滚动产品图片展示代码
基于jQuery的产品图文展示代码,可实现点击左右滚动,自动滚动.动态效果还不错.基于jQuery的产品图文展示jQuery插件stepcarousel.js. 配置注意下面几处的ID,要与HTML结 ...
- WEB前端 从原生JavaScript到MVVM
在了解MVVM之前,我们先回顾一下前端发展的历史阶段,做到心中有数,才会更好理解. 这段回顾历史,由于网上就可查不少资料,但都篇幅很长,晦涩难懂. 所以我引用了 廖雪峰老师网站总结的一段话,言简意骇, ...
- 加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】
作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...
- mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
最新文章
- 机器学习竞赛实际上是一场数据竞赛
- 强化学习(十七) 基于模型的强化学习与Dyna算法框架
- “面试不败计划”:面试题基础二
- linux下uvc协议访问usb摄像头,Ubuntu调用USB摄像头
- oracle 双结点监听文件,RAC监听服务两个节点 只能起一个
- 一个小老板从小公司创业开始做起的过程记录
- 【java】对象变成垃圾被垃圾回收器gc收回前执行的操作:Object类的protected void finalize() throws Throwable...
- Seata多微服务互相调用_全局分布式事物使用案例_Order-Module order微服务的配置搭建---微服务升级_SpringCloud Alibaba工作笔记0060
- 挑战程序设计竞赛(第2版) 第3章笔记
- 五分钟搭建一个MarkDown文档解析器
- 10 步让你成为更优秀的Coder
- plSQL中修改代码字体的大小
- 一文详解|增长那些事儿
- mysql 语法 日期转换成字符串_mysql日期转换成字符串的方法
- 例题5-3 安迪的第一个字典 UVa10815
- 大数据平台运维之Hbase
- python之表白神器--组图拼爱心墙
- 怎样迁移网站服务器和域名?
- 微信多开器 Python窗口编程 隔离运行(一)
- Python编写带音效游戏——击球打玻璃块
热门文章
- 2013年总结(4)-人脉
- 从PCI上读取数据 线程和定时器效率
- Linux C/C++开发、嵌入式软件开发面试记录 ( 四)
- tomcat老启动不起来问题
- 5.Kong入门与实战 基于Nginx和OpenResty的云原生微服务网关 --- Kong 的配置详解
- 30.yii2 --- 全文检索简介
- 26.卷1(套接字联网API)---线程
- 10. zf workflow
- 26. 面向对象程序设计
- np合并 python_Python办公自动化自动更新不对称表格