MENU

BootStrap布局鼠标滚动失效问题

• May 13, 2019 • Read: 2884 • Tutorial

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

情景

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

 <script>
    !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);
    }();
</script>

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

Leave a Comment

3 Comments
  1. 复制了,以后说不定用的上

  2. 大佬,技术的就不懂了。

    1. @奶爸de笔记不是大佬啦