javascript - JavaScript 的 onscroll() 函数有问题

Question

我正在尝试使用包含工作经验的静态框创建在线简历。这个想法是，当您向上或向下滚动时，不同的公司及其相关信息会淡入淡出。到目前为止，这是我的 JavaScript 代码:

var employment_history_display = "Microsoft";
document.getElementById("employment_history_text").onwheel = function () {
    if (event.deltaY < 0) {
        if (employment_history_display == "SoftwareAG") {
            $("#SoftwareAG").animate({ opacity: '0' });
            $("#Microsoft").animate({ opacity: '1' });
            employment_history_display = "Microsoft";
        } else if (employment_history_display == "NAS") {
            $("#NAS").animate({ opacity: '0' });
            $("#SoftwareAG").animate({ opacity: '1' });
            employment_history_display = "SoftwareAG";
        };
    } else if (event.deltaY > 0) {
        if (employment_history_display == "SoftwareAG") {
            $("#SoftwareAG").animate({ opacity: '0' });
            $("#NAS").animate({ opacity: '1' });
            employment_history_display = "NAS";
        } else if (employment_history_display == "Microsoft") {
            $("#Microsoft").animate({ opacity: '0' });
            $("#SoftwareAG").animate({ opacity: '1' });
            employment_history_display = "SoftwareAG";
        };
    };
};

当页面加载时，“Microsoft”div 是可见的，其他两个是透明的。它在那个 onwheel 中工作，下一个 div 淡入，最后一个淡出。但是，它会快速滚动浏览两者而不会停在中间。我相信这是由于 onwheel 返回多个值，因此函数重复多次。有没有办法让onwheel下定义的函数只作用一次？

Answer 1

一旦满足某个任意条件，使处理程序停止运行的通用方法是在满足条件后从自身中删除事件处理程序——例如，在函数第一次执行结束时，如果您希望它只执行一次，请执行以下操作:document.getElementById("employment_history_text").onwheel = function () {}