Получение Uncaught TypeError: Невозможно прочитать свойство 'offsetTop' с нулевой ошибкой для прокрутки

Question

Получение Uncaught TypeError: Невозможно прочитать свойство 'offsetTop' с нулевой ошибкой для прокрутки

1

У меня проблема, когда я получаю ошибку uncaught type, но скрипт все еще работает. Я хотел бы разрешить это, но, похоже, не вижу проблемы. Любая помощь очень ценится! Скрипт ниже.

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");
       }
       });
    });
}

AaronS 23 окт. 2018, в 00:45

Источник

0

Ошибка означает, что section не определен. Отладка, чтобы выяснить, почему она не определена
Jaya 22 окт. 2018, в 22:07
1

Есть значение hash , у которого нет связанного раздела. Проверьте значения, чтобы убедиться, что они соответствуют вашим ожиданиям, и дважды проверьте, что вы не делали опечаток или чего-либо еще.
John Montgomery 22 окт. 2018, в 22:08
1

document.querySelector может вернуть null . Любой метод в javascript, который мог бы возвратить нуль, должен быть проверен, чтобы видеть, является ли он нуль или имеет значение, прежде чем пытаться ссылаться на его свойства. developer.mozilla.org/en-US/docs/Web/API/Document/...
chiliNUT 22 окт. 2018, в 22:19
0

@JohnMontgomery ты прибил это. Я пропускаю раздел, на который я ссылаюсь с липкой навигацией, которая вызывает ошибку, обновил раздел с идентификатором, и он работал отлично. Извините, что это был простой ответ. Спасибо всем за все их предложения!
AaronS 22 окт. 2018, в 22:46
0

Возможный дубликат Почему jQuery или метод DOM, такой как getElementById, не находят элемент?
Heretic Monkey 22 окт. 2018, в 23:02

Показать ещё 3 комментария

Теги:

javascript

1 ответ

Ещё вопросы

Ошибка означает, что section не определен. Отладка, чтобы выяснить, почему она не определена
Есть значение hash , у которого нет связанного раздела. Проверьте значения, чтобы убедиться, что они соответствуют вашим ожиданиям, и дважды проверьте, что вы не делали опечаток или чего-либо еще.
document.querySelector может вернуть null . Любой метод в javascript, который мог бы возвратить нуль, должен быть проверен, чтобы видеть, является ли он нуль или имеет значение, прежде чем пытаться ссылаться на его свойства. developer.mozilla.org/en-US/docs/Web/API/Document/...
@JohnMontgomery ты прибил это. Я пропускаю раздел, на который я ссылаюсь с липкой навигацией, которая вызывает ошибку, обновил раздел с идентификатором, и он работал отлично. Извините, что это был простой ответ. Спасибо всем за все их предложения!
Возможный дубликат Почему jQuery или метод DOM, такой как getElementById, не находят элемент?

David · Accepted Answer · 2018-10-22T21-29-00.000Z

Когда вы выполните:

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

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

Вы выполняете итерацию всех элементов классом .js-pdp-link и, если они реализуют интерфейс HTMLHyperlinkElementUtils (т. Е. Элемент a или area), извлекают их свойство hash. Затем вы используете 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 свойству .offsetTop, вы получите TypeError: section is null.

Да, это так, в одном из моих разделов отсутствовал соответствующий идентификатор, который у меня был для пункта меню липкой навигации. Спасибо!!