鼠标控制滚动条

Posted ctb-web

tags:

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

<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);
        **/

  

以上是关于鼠标控制滚动条的主要内容,如果未能解决你的问题,请参考以下文章