我遇到了一个问题,我遇到了一个未捕获的类型错误,但脚本仍然有效。我想解决这个问题,但似乎看不到问题所在。任何帮助是极大的赞赏!脚本如下。
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");
}
});
});
}
最佳答案
当你这样做时:
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
作为选择器。
它可能以三种不同的方式失败:
如果目标元素没有实现
HTMLHyperlinkElementUtils
,link.hash
返回undefined
。如果
href
属性不包含哈希,link.hash
返回一个空字符串。如果没有元素的
id
等于hash
,则querySelector(link.hash)
是空
。
当您尝试 document.querySelector(link.hash)
时,情况 2 导致 SyntaxError: '' is not a valid selector
。
另外两个允许您运行 querySelector
但导致 section
为 null
。然后,如果您尝试访问其 .offsetTop
属性,您将得到 TypeError: section is null
。
关于javascript - 获取未捕获的类型错误 : Cannot read property 'offsetTop' of null error for scroll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52938380/