CSS overflow-x/y设置致JavaScript scrollTop失效的解决方法求助

问题背景 #

我编写了以下JavaScript代码，用于在页面滚动到特定高度时修改目标div元素的类名：

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > 300){
        $('#div').addClass('class');
    }
    if(scroll > 500){
        $('#div').removeClass('class');
    }
});

但由于CSS中对body和html设置了以下样式：

body, html{
    overflow-y: overlay;
    overflow-x: hidden;
}

导致上述滚动监听代码完全失效。我尝试单独调整其中一个属性为hidden、unset等值，发现只有同时将两个属性都设为unset时，JS代码才能正常工作。

已尝试的方案及结果 #

• 尝试方案：CSS设置overflow:hidden + JavaScript监听scrollTop
• 预期效果：滚动监听逻辑正常执行
• 实际结果：无法正常工作

需求 #

寻求绕过该问题的方法，比如替换的JavaScript滚动监听函数，或者其他可以隐藏滚动条同时不影响滚动监听的CSS方案。

内容的提问来源于stack exchange，提问作者metrix