js控制横向滚动条跟鼠标滚轮绑定

 

<template>
	<div id="div">
		<!-- 左边元素 -->
		<div id="div1">
			字母和数字键的键码值(keyCode)
			按键 键码 按键 键码 按键 键码 按键 键码
			A 65 J 74 S 83 1 49
			B 66 K 75 T 84 2 50
			C 67 L 76 U 85 3 51
			D 68 M 77 V 86 4 52
			E 69 N 78 W 87 5 53
			F 70 O 79 X 88 6 54
			G 71 P 80 Y 89 7 55
			H 72 Q 81 Z 90 8 56
			I 73 R 82 0 48 9 57
		</div>
		<!-- 中间黄色拖动元素 -->
		<div id="div2" @mousedown="mousedown"></div>
		<!-- 右边元素 -->
		<div id="div3">
			<!-- tab页 -->
			<el-tabs class="tabRight" v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane v-for="(value,key,index) in tabData" :label="key" :name="key">
					{{value.key}}:{{value.value}}
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: '',
				tabData: {},
			};
		},
		mounted() {
			// 获取后台tab页数据可从后台查询
			this.getTabList();
			// tab页横向滚动条绑定滚轮
			let tabContainer = document.querySelector(".tabRight .el-tabs__nav-scroll")
			tabContainer.addEventListener("wheel",(e) =>{
				e.preventDefault();
				tabContainer.scrollLeft += e.deltaY
			})
		},
		methods: {
			getTabList() {
				// 获取后台tab页数据可从后台查询
				this.tabData = {
					"用户管理": {
						"key": "用户管理",
						"value": "用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理用户管理"
					},
					"配置管理": {
						"key": "配置管理",
						"value": "配置管理"
					},
					"角色管理": {
						"key": "角色管理",
						"value": "角色管理"
					},
					"定时任务补偿": {
						"key": "定时任务补偿",
						"value": "定时任务补偿"
					},
					"定时任务补偿1": {
						"key": "定时任务补偿",
						"value": "定时任务补偿"
					},
					"定时任务补偿2": {
						"key": "定时任务补偿",
						"value": "定时任务补偿"
					},
					"定时任务补偿3": {
						"key": "定时任务补偿",
						"value": "定时任务补偿"
					},
					"定时任务补偿4": {
						"key": "定时任务补偿",
						"value": "定时任务补偿"
					},
				}
				// 获取到数据后默认选择第一个
				for (var tab in this.tabData) {
					this.activeName = tab;
					break;
				}
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			// 中间拖动黄色的调整两边大小
			mousedown(e) {
				// 父级框的宽度
				let divWidth = document.getElementById("div").clientWidth;
				//添加鼠标移动事件
				document.onmousemove = function(e) {
					// 防止链接打开 URL
					e.preventDefault();
					// e.clientX是鼠标指针相对于浏览器页面（或客户区）的水平坐标
					// 可以理解为鼠标距离屏幕左侧的距离
					// 当鼠标距离左面大于300和鼠标位置小于父级总长度-220
					//就是控制左面和右边两个的最小宽度
					if (e.clientX > 300 && e.clientX < (divWidth - 220)) {
						//设置左面的大小
						document.getElementById("div1").style.width = (e.clientX + "px");
						//设置右边的大小
						document.getElementById("div3").style.width = ((divWidth - e.clientX - 10) + "px");
					}
				}
				document.onmouseup = function(e) {
					document.onmousemove = null;
					document.onmouseup = null;
				}
			}
		}
	}
</script>
<!-- scoped="scoped" -->
<style>
	
	/* tab页显示滚动条隐藏箭头 */
	.tabRight .el-tabs__nav-scroll{
		overflow: auto;
	}
	.tabRight .el-tabs__nav-prev{
		display: none;
	}
	.tabRight .el-icon-arrow-left{
		display: none;
	}
	
	#div {
		height: 600px;
		background-color: #55aaff;
	}
	#div>div {
		float: left;
	}
	#div1 {
		height: 500px;
		width: 80%;
		background-color: #00ff00;
	}
	#div2 {
		height: 500px;
		width: 10px;
		background-color: #ffff00;
		cursor: w-resize;
	}
	#div3 {
		height: 500px;
		width: calc(20% - 10px);
		background-color: #aa00ff;
	}
</style>