JavaScript控制滚动条左右移动

最新推荐文章于 2025-05-15 09:44:40 发布

automation13

最新推荐文章于 2025-05-15 09:44:40 发布

阅读量2.1w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： javascript 进度条 html

本文链接：https://blog.youkuaiyun.com/automation13/article/details/77141506

Web前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用JavaScript控制网页中滚动条左右移动的方法。通过监听鼠标滚轮事件并阻止默认滚动行为，实现对滚动条位置的手动调整。适用于希望精细化控制页面滚动效果的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript控制滚动条左右移动

完整HTML代码：

<!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>

测试环境：Chrome 60.0.3112.90（正式版本）（64 位）； Microsoft Edge