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

Question

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

<div class="element-1">

    <div class="element-2"> 

    </div>

</div>

element-2's宽度大于element-1's宽度。因此，我已overflow:scroll着手element-1.

我还在element-1. 这会触发滚动事件。

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

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

Codepen 链接

---

更新：

所以我注意到，如果你在 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>

标签： javascripthtml

Answer 1

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