JavaScript控制滚动条左右移动

最新推荐文章于 2024-05-04 15:59:34 发布

automation13

最新推荐文章于 2024-05-04 15:59:34 发布

阅读量2w

点赞数 6

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

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

版权

Web前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

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

automation13

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
JavaScript控制滚动条左右移动

JavaScript控制滚动条左右移动完整HTML代码：&lt;!DECTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=‘utf-8’&gt; &lt;title&gt;onwheel-test&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &a
复制链接

扫一扫