纯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

原创文章