使用前提：

页面内容过多，默认的滚动条太难看，在不引入滚动条插件情况下让界面不使用滚动条，又能通过鼠标滚动

实现步骤：

1 在会出现滚动条的组件上设置隐藏滚动条

overflow:hidden;

 

2  在上述组件的bind-mouseenter（鼠标进入事件）增加滚动监听器

　　var num = 0;    var i = true;    Model.prototype.buttonGroup1Mouseenter = function(event){        var me = this;                this.getElementByXid("buttonGroup1").addEventListener("mousewheel", function(e){                        if(i||(num++)%5===0){                    i = false;                if(e.wheelDelta>0){                    up(me); // 向上滚动                }else{                    down(me); //向下滚动                }                setTimeout(function(){                    i=true;                    num=0;                }, 300);                            }                                });    };

其中，当鼠标进行滚动时，每一下滚动都会触发滚动事件，这会造成代码的执行滞后于事件的触发，给人一种卡顿的感觉，并造成页面卡停，所以需要通过 i 变量来设置当一次事件代码执行完毕后才能执行下一次处理；但又想通过快速滚动鼠标让事件执行的快点，所以又加入了 num ，每滚动5次鼠标视为一次有效的触发，既可以通过鼠标滚动的快慢控制滚动的速度，也可以防止触发事件次数过多导致页面的卡顿。

3 实现滚动代码

// 向上滚动一次    var up = function(me){        var scroll = $(me.getElementByXid("buttonGroup1"))[0];                        if(scroll.scrollTop-39>0){                scroll.scrollTop -=39;            }else{                scroll.scrollTop = 0;             }                };        // 向下滚动一次    var down = function(me){        var scroll = $(me.getElementByXid("buttonGroup1"))[0];        var bottom = scroll.scrollHeight- scroll.offsetHeight;                if(bottom-scroll.scrollTop>39){            scroll.scrollTop +=39;        }else{            scroll.scrollTop = bottom;         }    };

 其中，me.getElementByXid("buttonGroup1")为1中设置了样式的组件对象，39为滚动一次移动的高度，我这里刚好跳过一个功能项，不至于只移动半个按钮

4 在绑定了事件监听器的组件的bind-mouseleave事件上移除监听器

Model.prototype.buttonGroup1Mouseleave = function(event){

　　this.getElementByXid("buttonGroup1").removeEventListener("mousewheel",function(){});

};