javascript - 水平滚动事件未在 Windows 上触发

Question

让我们保持简单。我有两个 div。

<div class="element-1">

    <div class="element-2"> 

    </div>

</div>

element-2 的 宽度大于element-1 的 宽度。因此，我在 element-1 上设置了 overflow:scroll。

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

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

现在在我的 mac 上，使用 chrome，这按预期工作。但是，在 Windows 上，使用 chrome，事件永远不会被触发。

Codepen Link

---

更新:

所以我注意到如果你在 Windows 上按下 shift 键。滚动事件触发。

$('.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 + 箭头键或Shift + 鼠标滚轮 或底部的水平滚动条。