select使用了美化插件,但使用鼠标滚轮会带动页面的滚动条,所以查了下资料
1、使用jquery.mousewheel.js 插件,能够响应鼠标滚轮事件
2、鼠标滚轮事件中判断滚动条是否到了top和end,如果到了,就使用event.preventDefault()取消动作
为了调用方便,简单写成个jquery插件
(function ($) {
$.fn.noParentScroll = function () {
function setScrollTop(event,value)
{
if(event.currentTarget.scrollTop!=undefined)
{
event.currentTarget.scrollTop=value;
}
else if(navigator.userAgent.indexOf('Chrome')>-1)
{
event.currentTarget.body.scrollTop=value;
}
else
{
event.currentTarget.documentElement.scrollTop=value;
}
}
return window.jQuery(this).each(function (i) {
$(this).bind('mousewheel', function (event, delta) {
var nScrollHight = event.currentTarget.scrollHeight || event.currentTarget.documentElement.scrollHeight;
var nScrollTop;
if(event.currentTarget.scrollTop!=undefined)
{
nScrollTop=event.currentTarget.scrollTop;
}
else if(navigator.userAgent.indexOf('Chrome')>-1)
{
nScrollTop=event.currentTarget.body.scrollTop;
}
else
{
nScrollTop=event.currentTarget.documentElement.scrollTop;
}
var nHight = event.currentTarget.clientHeight || event.currentTarget.documentElement.clientHeight;
if (delta < 0) {
if (nScrollTop + nHight >= nScrollHight-event.deltaFactor-1)
{
event.preventDefault();
}
}
else if (nScrollTop <= event.deltaFactor + 1)
{
event.preventDefault();
}
});
});
}
})(jQuery);