JavaScript控制滚动条左右移动JavaScript控制滚动条左右移动

75 阅读 0 评论 50 点赞

我是靠谱客的博主搞怪雪碧，最近开发中收集的这篇文章主要介绍JavaScript控制滚动条左右移动JavaScript控制滚动条左右移动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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