📅 最后修改于: 2023-12-03 15:31:12.731000 🧑 作者: Mango
deltaY属性是WheelEvent接口的一个只读属性。它返回表示滚轮操作在垂直方向上滚动的量的数字值。当向上滚动时，该值为一个正数，当向下滚动时，该值为一个负数。
var delta = event.deltaY;
<!DOCTYPE html>
<html>
<head>
<title>WheelEvent - deltaY Property</title>
</head>
<body>
<div id="box" style="height: 500px; border: 1px solid black; overflow: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis ante vel libero lacinia, et tristique sapien interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non libero dapibus, ultricies purus sit amet, aliquam lectus. Curabitur finibus tempus nunc, nec ornare magna hendrerit molestie. Quisque facilisis enim nec nisl ullamcorper volutpat. Sed commodo ipsum in nisl mollis, et sollicitudin eros maximus. Sed sit amet tellus fermentum, pulvinar sapien ac, suscipit urna.</p>
</div>
<script>
var box = document.querySelector('#box');
box.addEventListener('wheel', function(e) {
if (e.deltaY < 0) {
box.scrollTop -= 50; // 向上滚动
} else {
box.scrollTop += 50; // 向下滚动
}
e.preventDefault(); // 阻止默认滚动行为
});
</script>
</body>
</html>
以上示例演示了如何使用deltaY属性来获取滚轮事件的滚动方向和滚动量，并将其应用于实际的滚动操作中。在此示例中，我们在div元素上添加了一个wheel事件监听器，并检查deltaY属性来检查滚动方向。如果滚轮向上滚动，则将滚动条向上滚动50个像素；如果滚轮向下滚动，则将滚动条向下滚动50个像素。最后，我们调用preventDefault()方法来阻止默认的滚动操作。