Onclick，滾動到動態生成的div

Question

我正在使用 Wagtail CMS，我的大部分內容都是動態生成的——這讓我覺得這樣的事情有點棘手。

基本上我想點擊我的側邊欄項目並滾動到我頁面中的那個部分。

<div class="sidebar">
<nav>
  <ul>
    {% for block in page.article_content %}
    <li><a class="section-link" id="{{ block.value.header }}"
      href="">{{ block.value.header }}</a></li>
    {% endfor %}
  </ul>
</nav>

我的側邊欄代碼為頁面上的每個 block.value.header 生成 li 元素。

<div class="container">
    {% for block in page.article_content %}
    <main>
      <section id="{{ block.value.header }}">
        <h1 class="headline-text section-header" >{{ block.value.header}}</h1>
        <div class="header-bar"></div>
        <div class="case-study-body-container" >
          {{ block.value.description|richtext }}
        </div>
      </section>
    </main>
    {% endfor %}

script.js 看起來像這樣

JS Code
    let mainNavLinks = document.querySelectorAll("nav ul li a.section-link");
    let mainSections = document.querySelectorAll("main section");

    console.log(mainNavLinks)

    let lastId;
    let cur = [];

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

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

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

我目前遇到的錯誤是：未捕獲的DOMException：無法在“文檔”上執行“querySelector”：提供的選擇器為空。

這是頁面的樣子，可以給你們一個想法

Answer 1

您可以嘗試像這樣包裝您的js代碼：

window.onload = function() {
    your js code
}