Question

以下代码正在成功执行：

var $ = document.querySelector.bind(document);

function windowScroll() {
    var elems = ['section-1', 'section-2', 'section-3', 'section-4'];
    elems.forEach(function(elem) {
        if(window.pageYOffset >= $(`#${elem}`).offsetTop - $('.banner-header').offsetHeight) {
            var li = document.querySelectorAll('.banner-header > nav > a');
            for(var i = 0; i < li.length; i++) {
                li[i].classList.remove('active-nav-item');
            }
            $(`.banner-header > nav > a[href='#${elem}']`).classList.add('active-nav-item');
        } else {
            $(`.banner-header > nav > a[href='#${elem}']`).classList.remove('active-nav-item');
        }
    });
}

function elementEvent(element, onEvent, eventCallback) {
    if(element.addEventListener) {
        element.addEventListener(onEvent, eventCallback, false);
    } else {
        element.attachEvent(onEvent, eventCallback);
    }
}

elementEvent(window, 'scroll', windowScroll);

当我打开控制台时，我注意到了一些显示此错误消息的内容，参考第6行：

未捕获的TypeError：无法读取null的

使offsetTop属性变得复杂的是什么？我应该在代码中更改哪些内容以使其正确无误？

Answer 1

offsetTop没有错。但是，您的错误Uncaught TypeError: Cannot read property 'offsetTop' of null表示父对象为null，而null.offsetTop不存在。因此看起来$(`#${elem}`)正在为某个元素返回null。确保数组中的每个元素都存在于DOM中。

javascript offsetTop属性都成功并且同时出错

1 个答案: