码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标控制滚动条

时间:2018-10-16 13:51:24      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:function   style   func   滚动   java   事件   鼠标   back   ide   

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

  

鼠标控制滚动条

标签:function   style   func   滚动   java   事件   鼠标   back   ide   

原文地址:https://www.cnblogs.com/ctb-web/p/9796970.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!