onclick，滚动到动态生成的div答案

【问题标题】：Onclick, scroll to div that is dynamically generatedonclick，滚动到动态生成的div
【发布时间】：2019-10-25 03:15:42
【问题描述】：

我正在使用 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");
        }
      });
    });

我目前遇到的错误是：Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 提供的选择器是空的。

这是页面的外观，可以让你们了解

【问题讨论】：

您的侧链接中的href="str.concat(' #', {{ block.value.header }});"> 之类的内容有问题吗？显然，如果您希望将功能从 inline elements 中取出，您可以将此功能扩展到 JS 以返回适当的 #myelementID。
首先要确定这是 Javascript 本身的问题，还是“Wagtail 没有输出 Javascript 想要的 HTML”问题。如果您不确定，请尝试在 Wagtail 之外将页面重新创建为纯 HTML，看看问题是否仍然存在。这样，您将有一个更集中的问题，不需要人们同时是 Wagtail 和 Javascript 专家。
@gasman 用硬编码的 html 重新创建它一点都不具有挑战性，事实上，我以前在学习 HTML 时做过。从本质上讲，它真正归结为使用通过 wagtail 生成的 javascript 来定位特定元素，我不太熟悉
好的，那么您对 Wagtail 输出的 HTML 有一个清晰的概念了吗？如果是这样，如果你问“我如何让 Wagtail 输出 X”这个问题，你会得到更好的回答——根本不需要启动 Javascript。

标签： javascript html django django-templates wagtail

【解决方案1】：

您可以尝试像这样包装您的 js 代码：

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

【讨论】：