boostrap 鼠标滚轮滑动图片_BootStrap布局鼠标滚动失效问题

记录最近在项目中遇到的一个奇葩bug

情景

用bootstrap布局后插入某些元素会导致鼠标滚轮失效 进度条正常 就是鼠标控制不了

!function () {

var EventUtil = {

addHandler: function (element, type, handler) {

if (element.addEventListener) {

element.addEventListener(type, handler, false);

} else if (element.attachEvent) {

element.attachEvent('on' + type, handler);

} else {

element['on' + type] = handler;

}

},

getEvent: function (event) {

return event ? event : window.event;

},

stopPropagation: function (event) {

event = event || window.event;

if (event.stopPropagation) {

event.stopPropagation();

} else {

event.cancelBubble = true;

}

}

};

function handleMouseWheel(event) {

EventUtil.stopPropagation(event);

event = EventUtil.getEvent(event);

var value = event.wheelDelta || -event.detail;

var delta = Math.max(-1, Math.min(1, value));

console.log(delta < 0 ? 'down' : 'up');

}

EventUtil.addHandler(document, 'mousewheel', handleMouseWheel);

EventUtil.addHandler(document, 'DOMMouseScroll', handleMouseWheel);

}();

插入到网站底部就可以解决了