html js 禁用浏览器上下滑动,纯JS阻止浏览器默认滚动事件,实现自定义滚动方法...
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动
javaScript代码如下:
//滚动实现方法,使用鼠标滚轮每次滚动浏览器大小的距离function windowScroll(id, number, direction) { var oHtml = document.documentElement; //在IE8以下不支持使用class选取元素,这里采用id var oContent = document.getElementById(id); //获取文档的高度 var cHeight; if(direction === "top" ) { cHeight = oHtml.clientHeight; }else if( direction === "left" ) { cHeight = oHtml.clientWidth; }
//用于控制鼠标每个多长时间才能让页面滚动设置的变量 var count = 1; //在窗口尺寸改变的时候实时给cHeight赋值 window.onresize = function () { if(direction === "top" ) { cHeight = oHtml.clientHeight; }else if( direction === "left" ) { cHeight = oHtml.clientWidth; } }; if(window.addEventListener) { //用于判断当前浏览器是否为FF if( navigator.userAgent.toLowerCase().indexOf("firefox") !== -1 ) { oHtml.addEventListener("DOMMouseScroll", function (e) { //FF浏览器的滚动条滚动上下判断是与其它浏览器相反的,负值是向上滚动 if( count === 1 ) { //滚轮向上滚动时 if( e.detail < 0 ) { upRoll(); } //e.detail是正值说明是想下滚动 else if( e.detail > 0 ) { downRoll(); } } //阻止浏览器页面滚动的默认事件 e.preventDefault(); }, false); } else { oHtml.addEventListener('mousewheel',function (e) { var event = e || window.event; //当count = 1 时让页面可以滚动 if( count === 1 ) { //当鼠标向上滚动时 if( event.wheelDelta > 0 ) { upRoll(); } //当鼠标向下滚动时 if( event.wheelDelta < 0 ) { downRoll(); } } //阻止浏览器滚动的默认事件,防止页面来回晃动 event.preventDefault(); }, {passive: false}); } } else if(window.attachEvent) { oHtml.attachEvent("onmousewheel",function(){ console.log(count); if( count === 1 ){ //当鼠标向上滚动时 if( event.wheelDelta > 0 ) { upRoll(); } //当鼠标向下滚动时 if( event.wheelDelta < 0 ) { downRoll(); } } //阻止浏览器滚动的默认事件,防止页面来回晃动 return false; }); }
//向上滚动时执行的函数 function upRoll(){ if( getElemProp(oContent, direction) >= 0 ) { console.log("到顶了"); } else { elemDisplace(oContent, direction, 30, cHeight); //如果鼠标不是在顶部往上滚动的话就将count++ count++; setTimeout(function () { //当过了1000ms后把count置为1,让页面可以继续滚动 count = 1; }, 1000); } }
//向下滚动时执行的函数 function downRoll() { //判断是否滚动到底部 if( getElemProp(oContent, direction) <= -number*cHeight ) { console.log("到底了"); } else { elemDisplace(oContent, direction, -30, cHeight); //如果鼠标不是在顶部往上滚动的话就将count++ count++; setTimeout(function () { //当过了1000ms后把count置为1,让页面可以继续滚动 count = 1; }, 1000); } }}
//让元素加速运动function elemDisplace(elem, direction, speed, distance){ //记录元素当前的位置 var origin = parseInt( getElemProp(elem, direction) ); var pos; var Timer = setInterval(function(){ pos = parseInt( getElemProp(elem, direction) ); //判断元素是否位移到了指定的地方 if( Math.abs(pos - origin ) >= distance ){ if(speed > 0){ elem.style[direction] = origin + distance + 'px'; }else { elem.style[direction] = origin - distance + 'px'; } speed = 0; clearInterval(Timer); }else { //判断元素的位移方向 if(speed > 0) { speed++; } else { speed--; } elem.style[direction] = pos + speed + 'px'; } },15);}
//获取元素属性function getElemProp(elem, prop){ if(window.getComputedStyle){ return parseInt(window.getComputedStyle(elem, null)[prop]); }else{ return parseInt(elem.currentStyle[prop]); }}
使用注意事项:1.使用时直接调用windowScroll(id,number,direction)方法将需要滚动的元素id传入第一个参数(注意是直接传入id,不要将id选择器选取出来的元素传入)number是滚动的次数direction是滚动的方向,如果你需要水平滚动需要传入"left"、垂直滚动传入"top"2.其它两个方法是为了封装函数,解决浏览器的兼容性问题
对该方法的一些补充(可以添加点击元素来控制页面的滚动),点击下方链接查看https://www.cnblogs.com/hros/p/10941141.html
原创文章
js阻止浏览器默认行为
js阻止浏览器默认行为
& ...
JS 阻止浏览器默认行为和冒泡事件
JS 冒泡事件 首先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如
js阻止浏览器默认事件
1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { / ...
Javascript:阻止浏览器默认右键事件,并显示定制内容
在逛一些知名图片社区的时候,遇到自己心怡的图片,想要右键另存的时候,默认的浏览器菜单不见了,却出现了如:[©kevin版权所有]之类的信息: 今天在看Javascript事件默认行为相关的知识,所以, ...
js 阻止浏览器默认行为
JQuery 阻止js事件冒泡 阻止浏览器默认操作
//阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡:
html js 禁用浏览器上下滑动,纯JS阻止浏览器默认滚动事件,实现自定义滚动方法...相关推荐
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果,CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
基于 PDF.js 开发了 PDF 批注注释插件库,支持多种批注类型,支持写入批注到pdf中并保存,为目前纯前端 JavaScript 最佳实现方案,完美支持 老版浏览器.手机.平板 等移动端设备,仅 ...
- js:原生ajax【纯js】
ajax 同步与异步区别 同步:按顺序,依次执行,向服务器发送请求-->客户端做其他操作 异步:分别执行,向服务器发送请求==>同时执行其他操作 原生ajax 四步骤 创建ajax对象 v ...
- 鼠标滚动事件,鼠标滚动一下,屏幕滑动一屏
思路:1.判断鼠标向上还是向下滚动 2.执行鼠标事件 鼠标滚动事件注册事件资料:https://www.cnblogs.com/wsoft/articles/2856861.html <!DOC ...
- html5幻灯片 自动滑动,纯js和CSS3炫酷自动幻灯片特效
Karrot Slider是一款纯Javascript和CSS3制作的自动播放的幻灯片插件.该幻灯片没有任何外部依赖,内置有8种不同的动画过渡效果.该幻灯片支持响应式图片设计模式,也可以制作为全屏幻灯 ...
- H5中 JS 禁用安卓手机物理返回键 , 微信浏览器中也支持
XBack = {}; (function(XBack) { XBack.STATE = 'x - back'; XBack.element; ...
- 用JS来create结点,纯JS代码生成html页面(作业练习)
<script>window.onload = function(){document.title = '表单示例';var body = document.body;// body ap ...
- vue 监听滚动事件之菜单滚动吸顶点击滑动到指定位置点击高亮
###菜单滚动吸顶效果: ###html: <section class="switchModule" id="switchModule">< ...
- 浏览器设置了打开会显示特定网页为什么还是显示2345_浏览器弹窗广告多?阻止网页弹出广告的三种方法...
现在的广告可以说是无处不在,无孔不入,我们在打开网页浏览时就会经常遇到些广告弹窗,每次都要去点击关闭,让人觉得非常不爽. 虽然大多第三方浏览器可以安装屏蔽弹窗广告的插件,但今天要给大家介绍下其他禁止网 ...
最新文章
- SpringBoot配置文件放在jar外部
- 人民日报:人工智能,务实发展是正道
- 网站PC端跟移动端有哪些不同的区别所在?
- Android中Intent的显示和隐式使用
- sqlserver中int 类型的字段,值为null的时候引发一个问题
- 使用Silverlight3中的DataPager实现服务器端分页
- mysql什么情况会扫描所有_造成MySQL全表扫描的原因
- 旷视 CVPR 2021 论文解读直播来喽!
- 牛客 -- leetcode -- evaluate-reverse-polish-notation
- 深度学习福利入门到精通第四讲——GoogleNet模型
- 广东全国计算机2018年报名时间,2018年3月广东计算机等级考试报名时间
- FPGA学习3-Vivado简易使用方法
- xmapp mysql启动失败 Attempting to start MySQL service...
- APP兼容性专项测试
- jzoj 3457. 【NOIP2013模拟联考3】沙耶的玩偶(doll) (Standard IO)
- bzoj2818Gcd
- android中point pt1,Android dip,px,pt,sp 的区别详解
- 树及树的算法(4) —— 红黑树
- Java加密技术(三)—— HMACSHA1 加密算法
- 计算机网络的基本概念和因特网的基本知识
热门文章
- 乐高机器人亮剑_羊城e家互联网同道精英汇 多益网络诚邀更多游戏奋斗者加入...
- 如何测一个纸杯_如何测试一个纸杯
- 信息抽取之实体消歧,统一
- js获取当前时间 年月日 分秒
- 计算机硬件系统一直延用,会计从业考试:会计电算化计算机硬件系统
- Scratch-陶陶摘苹果
- 图像的模式(RGB和CMYK)、通道(8位、16位、32位)分别有什么作用
- python批量删缩进_鬼畜小姐姐+野狼disco,十分钟教你如何用Python剪辑一个牛逼的抖音小视频?...
- Java实验报告四,研究生薪资管理,创建一个抽象交通工具Vehicle类,经理与员工工资等实验
- vue 视频上传组件