vue横向滚动

开发过程中可能会碰到这样的情况，比如一张特别宽的图在不被压缩的情况下屏幕宽度放不下就会出现横向滚动条，但是有些用户不清楚需要按下Shift加滚轮可以进行横向滚动，就只能按着滚动条进行拖动，这样对于用户体验不是很好。

所以，就需要鼠标滚动来进行横向滚动，首先大家可以想到模拟键盘事件 比如鼠标移入后模拟按下shift。但是浏览器是不允许js模拟按下Shift，这里我用到了监听滚动事件进行设置滚动方向以及距离
以下是代码

<div class="generalScroll" v-mousewheel>
	<div class="model_img_item">
		<div v-for="(item,index) in modelList" :key="item.id">
			<img :src="item?.presignedUrl" alt="" >
		</div>
	</div>
</div>

directives:{
    mousewheel:{
			mounted (el) {
				el.addEventListener('wheel',(e:WheelEvent)=>{
					let num = 0
					if(e.deltaY > 0){
						num = 25
					}else{
						num = -25
					}
					el.scrollBy(num, 0);
				},{ passive: true })
			}
		},
}

这里我使用的是vue的自定义属性通过监听这个元素的滚动事件在每次滚动时候横向滚动25px