BEX5下实现鼠标滚动滚动条

Posted 东莞-小黄

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BEX5下实现鼠标滚动滚动条相关的知识,希望对你有一定的参考价值。

使用前提:

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

实现步骤:

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下实现鼠标滚动滚动条的主要内容,如果未能解决你的问题,请参考以下文章

js怎么让body滚动条滚动到底或者到底了 鼠标再滚动时让另外一个DIV滚动

Winform鼠标滑轮控制自定义滚动条

为啥鼠标滚动条不起作用?

delphi6 两个dbgrid如何实现水平滚动条同步滚动?

原生JavaScript实现滚动条

css如何在页面内出现滚动条的地方禁止鼠标滑轮滚动