首页 > 其他 > 详细

鼠标控制滚动条

时间:2018-10-16 13:17:29      阅读:160      评论:0      收藏:0      [点我收藏+]
<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);
        **/

  

鼠标控制滚动条

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!