JavaScript鼠标滚轮控制左右移动

String佳佳

已于 2022-05-10 10:00:07 修改

阅读量1.5k

点赞数

文章标签： javascript 前端 html

于 2022-05-10 09:58:59 首次发布

原文链接：https://blog.csdn.net/automation13/article/details/77141506

版权

项目效果：

在这里插入图片描述

实现方法：

<!DECTYPE html>  
<html>  
<head>  
<meta charset=‘utf-8’>  
<title>onwheel-test</title>  
</head>  
<body>  
    <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>  
      
    <script type='application/javascript'>  
        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);
        **/
    </script>  
</body>  
</html>