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&colon;阻止浏览器默认右键事件，并显示定制内容

在逛一些知名图片社区的时候,遇到自己心怡的图片,想要右键另存的时候,默认的浏览器菜单不见了,却出现了如:[©kevin版权所有]之类的信息: 今天在看Javascript事件默认行为相关的知识,所以, ...

js 阻止浏览器默认行为

JQuery 阻止js事件冒泡 阻止浏览器默认操作

//阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: