javascript - 获取未捕获的类型错误 : Cannot read property 'offsetTop' of null error for scroll

Question

我遇到了一个问题，我遇到了一个未捕获的类型错误，但脚本仍然有效。我想解决这个问题，但似乎看不到问题所在。任何帮助是极大的赞赏!脚本如下。

StickyNav: function() {
    let mainNavLinks = document.querySelectorAll(".js-pdp-link");
    let mainSections = document.querySelectorAll("section");
    let lastId;
    let cur = [];

    window.addEventListener("scroll", event => {
        let fromTop = window.scrollY + 70;

        mainNavLinks.forEach(link => {
            let section = document.querySelector(link.hash);

        if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) {
            link.classList.add("js-active");
       } else {
           link.classList.remove("js-active");
       }
       });
    });
}

Answer 1

当你这样做时:

let mainNavLinks = document.querySelectorAll(".js-pdp-link");

mainNavLinks.forEach(link => {
  let section = document.querySelector(link.hash);

您正在使用 .js-pdp-link 类迭代所有元素，如果它们实现了 HTMLHyperlinkElementUtils接口(interface)(即是一个a或一个area元素)，提取它们的hash属性(property)。然后，您使用 hash 作为选择器。

它可能以三种不同的方式失败:

1. 如果目标元素没有实现 HTMLHyperlinkElementUtils，link.hash 返回 undefined。

2. 如果 href 属性不包含哈希，link.hash 返回一个空字符串。

3. 如果没有元素的 id 等于 hash，则 querySelector(link.hash) 是 空。

当您尝试 document.querySelector(link.hash) 时，情况 2 导致 SyntaxError: '' is not a valid selector。

另外两个允许您运行 querySelector 但导致 section 为 null。然后，如果您尝试访问其 .offsetTop 属性，您将得到 TypeError: section is null。