Jquery 限制用户滚动鼠标滚轮直到css动画完成

我有几个函数，每个函数在鼠标滚轮上下调用，这些函数需要按特定顺序调用，但问题是，当用户滚动得更快时，调用这些函数时，没有完成前一个函数中包含的CSS动画，如何确保在用户进一步滚动之前完成所有以前的Css动画。

您可以执行以下操作：

$('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
});

$(".element").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
    // restore
    $('html, body').css({
        'overflow': 'auto',
        'height': 'auto'
    });
});

---

首先，将通过CSS禁用滚动，然后，在元素

的转换完成后，此CSS将被重置，并且可以再次滚动。
请发布一些示例代码！谢谢回复，但是上面的解决方案对我不起作用。那么请发布一个示例代码，以便我们能够验证。最好的方式是在上进行实时预览。感谢您的回答，通过“transitionend”，我可以跟踪css动画的结尾，然后禁用鼠标滚动。