Question

这适用于Firefox和Internet Explorer，但在Chrome中不起作用，我已经在运行Chrome的多台计算机上进行了测试。

我有什么遗漏导致这种情况无法在Chrome中运行吗？

<script>
document.addEventListener('DOMContentLoaded', function() { 
    var dealBar = function() {
        var scroll = document.documentElement.scrollTop;
        var sidebarDeals = document.querySelector('#sidebar__deals');
        var sidebarAdverts = document.querySelector('#sidebar__adverts');
        var adBottom = sidebarAdverts.offsetTop + sidebarAdverts.clientHeight;

        if (scroll > adBottom) {
            sidebarDeals.className = "sidebar__deals--fixed";
        } else {
            sidebarDeals.className = "sidebar__deals--relative";
        }       
    }

    window.addEventListener('scroll', function(e){
        dealBar();
    });
    dealBar();
});
</script>

我在控制台中没有错误。

Answer 1

当我删除与DOMContentLoaded事件相关的第一部分时，您的代码已被触发：demo。

我认为您的问题在于此处，Chrome可能会在加载DOM后执行您的代码，因此您的代码永远不会被执行。

尝试删除此部分：

<script> //document.addEventListener('DOMContentLoaded', function() { var dealBar = function() { var scroll = document.documentElement.scrollTop; var sidebarDeals = document.querySelector('#sidebar__deals'); var sidebarAdverts = document.querySelector('#sidebar__adverts'); var adBottom = sidebarAdverts.offsetTop + sidebarAdverts.clientHeight; if (scroll > adBottom) { sidebarDeals.className = "sidebar__deals--fixed"; } else { sidebarDeals.className = "sidebar__deals--relative"; } } window.addEventListener('scroll', function(e){ dealBar(); }); //dealBar(); //}); </script>

另外，关于滚动位置，您可能需要查看此帖子：JavaScript get window X/Y position for scroll

Answer 2

事件监听器不是问题。

更改

var scroll = document.documentElement.scrollTop;

到

var scroll = (document.documentElement.scrollTop || document.body.scrollTop);

这就是诀窍，似乎Chrome将其滚动位置基于<body>，而Firefox则基于<html>。

Chrome正在返回0表示滚动，导致该功能无法触发类更改。

Javascript addEventListener在Firefox和IE中工作但不是Chrome？

2 个答案: