js处理局部scroll事件禁止外部scroll滚动解决办法,jquery.mousewheel.js处理时禁止办法说明

js Code:

<script>
window.onload = function() {
    for (i = 0; i < 500; i++) {
        var x = document.createElement('div');
        x.innerHTML = "换行<br/>";
        document.body.appendChild(x);
    }
    function $(x) {
        return document.getElementById(x);
    };
    $("wrap").onmousewheel = function scrollWheel(e) {
        var sl;
        e = e || window.event;
        if (navigator.userAgent.toLowerCase().indexOf('msie') >= 0) {
            event.returnValue = false;
        } else {
            e.preventDefault();
        };
        if (e.wheelDelta) {
            sl = e.wheelDelta;
        } else if (e.detail) {
            sl = -e.detail;
        };
        if (sl < 0) {
            var x = parseInt($("he").innerHTML);
            x++;
            $("he").innerHTML = x;
        } else {
            var x = parseInt($("he").innerHTML);
            x--;
            $("he").innerHTML = x;
        };
    };
    if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
        //firefox支持onmousewheel
        addEventListener('DOMMouseScroll',
        function(e) {
            var obj = e.target;
            var onmousewheel;
            while (obj) {
                onmousewheel = obj.getAttribute('onmousewheel') || obj.onmousewheel;
                if (onmousewheel) break;
                if (obj.tagName == 'BODY') break;
                obj = obj.parentNode;
            };
            if (onmousewheel) {
                if (e.preventDefault) e.preventDefault();
                    e.returnValue = false; //禁止页面滚动
                    if (typeof obj.onmousewheel != 'function') {
                    //将onmousewheel转换成function
                    eval('window._tmpFun = function(event){' + onmousewheel + '}');
                    obj.onmousewheel = window._tmpFun;
                    window._tmpFun = null;
                };
                // 不直接执行是因为若onmousewheel(e)运行时间较长的话,会导致锁定滚动失效,使用setTimeout可避免
                setTimeout(function() {
                    obj.onmousewheel(e);
                },1);
            };
        },
        false);
    };
}
</script>
<div id="wrap" style="position:absolute;left:100px;top:0px;background:#ccc;width:300px;height:300px;">
<h1 id="he" style="text-align:center;width:100%;color:#f00;">0</h1>
鼠标移动这里,转动滚轮,尽情的调戏吧!
鼠标移出这里,转动滚轮,看看它的反应!
</div>

 

jquery code:
前提:加载了jquery的mousewheel插件。
代码如下:

$(function(){
    $('.timeline').mousewheel(function (event, delta) {
        if (delta > 0) {
            $(this).css('backgroundColor', 'red');
        } else {
            $(this).css('backgroundColor', 'blue'); 
        }
        return false; //return false即可
    });
})

 

posted @ 2013-09-24 15:16  老骆  阅读(3926)  评论(0编辑  收藏  举报