使用前提：

頁面內容過多，默認的滾動條太難看，在不引入滾動條插件情況下讓界面不使用滾動條，又能通過鼠標滾動

實現步驟：

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(){});
};

BEX5下實現鼠標滾動滾動條