鼠标控制滚动条

<div id='out' style='width:500px;height:500px;overflow:auto'>  
        <div id='inside' style='width:1000px;height:1000px;background-color:gray;overflow:auto'>  
        </div>  
    </div> 

  

 var outDiv = document.getElementById('out');  
        outDiv.onwheel = function(event){  
            //禁止事件默认行为(此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为)  
            event.preventDefault();  
            //设置鼠标滚轮滚动时屏幕滚动条的移动步长  
            var step = 50;  
            if(event.deltaY < 0){  
                //向上滚动鼠标滚轮,屏幕滚动条左移  
                this.scrollLeft -= step;  
            } else {  
                //向下滚动鼠标滚轮,屏幕滚动条右移  
                this.scrollLeft += step;  
            }  
        }
        /**
            // 如果要手动设置滚动条在Y轴方向的位置可以直接设置scrollTop,例如:
            outDiv.scrollTop = 500;
            // 如果要手动设置滚动条在X、Y轴方向的位置可以使用函数scrollTo,例如设置X轴滚动100,Y轴滚动400:
            outDiv.scrollTo(100,400);
        **/

  

posted @ 2018-10-16 11:28  陈健儿  阅读(576)  评论(0编辑  收藏  举报