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接口（ ie 是a或{{1 }}元素），提取其hash属性。然后，您将area用作选择器。

它可以通过三种不同的方式失败：

如果目标元素未实现hash，则HTMLHyperlinkElementUtils返回link.hash。
如果undefined属性不包含哈希，则href返回一个空字符串。
如果没有link.hash等于id的元素，则hash为querySelector(link.hash)。

当您尝试null时，情况2导致SyntaxError: '' is not a valid selector。

另外两个允许您运行document.querySelector(link.hash)，但导致querySelector为section。然后，如果您尝试访问其null属性，则会得到.offsetTop。

捕获TypeError：无法读取null错误的属性'offsetTop'滚动

1 个答案: