学步园

参考：http://jslover.com/?p=254

http://jslover.com/?p=258

遇到一个问题，页面和子页面同时存在滚动条，在鼠标滚轮时候，会冲突：子页滚动条到顶部或者底部时候会继续冒泡，去滚动父节点的滚动条。

解决这个问题，必需要拦截鼠标滚轮事件，重写滚动事件，这时候又出现了烦人的浏览器兼容问题：

1、不同浏览器标滚轮事件不一样：FF下是DOMMouseScroll，其它onmousewheel。

2、事件阻止方式不一样：FF只支持e.preventDefault()，IE只支持e.returnValue=false/return
false;

3、重写滚动事件就是根据获取到的滚轮返回数值来动态改变scrollTop，FF下：e.detail属性，向上为-3，向下为+3;其它:e.wheelDelta，向上为+120，向下-120。

根据以上几条有以下解决方法：

<ul id="ullist">
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
<li>fdsffffffff</li>
</ul>

<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
var ullist = document.getElementById("ullist");
if(jQuery.browser.mozilla){
    ullist.addEventListener('DOMMouseScroll',function(e){
        ullist.scrollTop += e.detail > 0 ? 60 : -60;   
        e.preventDefault();   
    },false);   
}else{   
    ullist.onmousewheel = function(e){   
        e = e || window.event;   
        ullist.scrollTop += e.wheelDelta>0?-60:60;   
        e.returnValue = false  
    }
}
</script> 

另一个脚本

<script type="text/javascript">
var SmoothScroll = function (win, opt) {   
//操作对象   
    this.win = win; 
//每次滚动位移 
    this.step = opt ? opt.step || 180 : 180;   
//缓动系数   
    this.f = opt ? opt.f || 0.1 : 0.1;   
this.interval = 10;   
this.intervalID = null;   
this.isFF = navigator.userAgent.toLowerCase().indexOf("firefox") >= 0;   
this.upOrDown = "";   
this.init();   
}   
SmoothScroll.prototype = {   
    init: function () {   
var _this = this;   
if (_this.isFF) {   
            _this.win.addEventListener('DOMMouseScroll', function (e) {   
                _this.upOrDown = e.detail < 0 ? "up" : "down";   
                _this.scrollHander();   
                e.preventDefault();   
            }, false);   
        } else {   
            _this.win.onmousewheel = function (e) {   
                e = e || window.event;   
                _this.upOrDown = e.wheelDelta > 0 ? "up" : "down";   
                _this.scrollHander();   
                e.returnValue = false;   
            }   
        }   
    },scrollHander: function () {   
var _this = this;   
        clearInterval(_this.intervalID);   
//目标位置   
        var tar = _this.win.scrollTop + _this.step * (_this.upOrDown == "up" ? -1 : 1);   
        _this.intervalID = setInterval(function () {   
//缓动   
            _this.win.scrollTop += (tar - _this.win.scrollTop) * _this.f;   
if (tar == _this.win.scrollTop) {   
                clearInterval(_this.intervalID);   
            }   
        }, _this.interval);   
    }   
} 
var div = document.getElementById("ullist");
var opt = {step:200,f:0.2};
new SmoothScroll(div,opt);
</script>

这样当在UL元素中滚动鼠标滚轮时，不会引起浏览器滚动条的滚动。

封装成jQuery插件：

(function($){
    $.fn.preventScroll = function(){
var _this = this.get(0);
if($.browser.mozilla){
            _this.addEventListener('DOMMouseScroll',function(e){
                _this.scrollTop += e.detail > 0 ? 60 : -60;   
                e.preventDefault();
            },false); 
        }else{
            _this.onmousewheel = function(e){   
                e = e || window.event;   
                _this.scrollTop += e.wheelDelta > 0 ? -60 : 60;   
                e.returnValue = false  
            };
        }
return this;
    };
})(jQuery);

调用方式：

$("#ullist").preventScroll();