JS_控制滚动条左右移动

JavaScript控制滚动条左右移动<!DECTYPE html><html><head><meta charset=‘utf-8’><title>onwheel-test</title></head><body><div id='out' style='width:500px;height:5

小歪 | 前端

4290人浏览 · 2022-01-10 15:20:36

小歪 | 前端 · 2022-01-10 15:20:36 发布

JavaScript控制滚动条左右移动

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

实例

在这里插入图片描述

<div class="layout" id="out">
	<div class="b">首页1</div>
	<div class="b">首页2</div>
	<div class="b">首页3</div>
	<div class="b">首页4</div>
	<div class="b">首页5</div>
	<div class="b">首页6</div>
	<div class="b">首页7</div>
	<div class="b">首页8</div>
	<div class="b">首页</div>
	<div class="b">首页</div>
	<div class="b">首页</div>
	<div class="b">首页</div>
	<div class="b">首页</div>
	<div class="b">首页</div>
	<div class="b">首页</div>
	<div class="b">首页</div>
	<div class="b">首页</div>
</div>
<div id="addd">
	向左
</div>
<div id="addddd">
	向右
</div>

<script type='application/javascript'>
	var outDiv = document.getElementById('out');
	let _scrollLeft = 0
	var step = 50;
	document.getElementById('addddd').addEventListener('click', () => {
		_scrollLeft += step
		outDiv.scrollTo(_scrollLeft, 0);
	})
	document.getElementById('addd').addEventListener('click', () => {
		_scrollLeft -= step
		outDiv.scrollTo(_scrollLeft, 0);
	})
</script>
<style>
	.layout {
		width: 70%;
		height: 50px;
		display: flex;
		overflow-x: auto;
	}

	.layout::-webkit-scrollbar {
		height: 0px;
	}

	.b {
		width: fit-content;
		padding: 0 24px;
		height: 50px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background: red;
		color: #ffffff;
		white-space: nowrap;
	}
</style>