水平滚动事件在windows上不触发

Question

让我们把这件事做得很简单。我有两个硬币。

<div class="element-1">

    <div class="element-2"> 

    </div>

</div>

element-2's宽度大于element-1's宽度。因此，我在element-1上设置了element-1。

我还在element-1上附加了一个事件侦听器。这会在滚动事件上触发。

$('.element-1').on('scroll', (event) => {
    console.log('im scrolling');
})

现在，在我的mac上，使用了铬，这就像预期的那样工作。但是，在windows上，使用chrome，事件永远不会被触发。

Codepen链路

更新：

所以我注意到如果你按下窗户上的换档键。滚动事件触发。

​

$('.element-1').on('scroll', (event) => {
	console.log('im scrolling');
})

.element-1 {
	background-color: blue;
	width: 600px;
	height: 200px;
		
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	
	overflow: scroll;
}

.element-2 {
	width: 1200px;
	height: 100px;
	background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element-1">
	
	<div class="element-2"> 
	
	</div>
	
</div>

​

Answer 1

Windows上的默认滚动方向是垂直的。如果要水平滚动，请使用Shift + Arrow Key或Shift + Mouse Scroll Wheel或底部的水平滚动条。