搜索元素时window.ScrollTo（x，y）不起作用

Question

我有一个文档，其中包含具有唯一 ids 的某些元素。此页面包含数百个不同的 div，每个 div 都有其唯一的 ID。例如，考虑以下情况：

<div id='root'>
    <div id='my-1-id'>1</div>
    <div id='my-2-id'>2</div>
    <div id='my-3-id'>3</div>
    <div id='my-4-id'>4</div>
    <div id='my-5-id'>5</div>

    // Even more divs

    <div id='my-1000-id'>1000</div>
</div>

在我的React 组件中，我实现了LazyRendering 功能，以便在用户向下滚动页面时加载document（这是非常自定义的行为）。

但是，现在，我希望实现一个功能，使用document.getElementById 浏览页面的某些部分。但是在页面上查找所有内容都不起作用，因为没有一次性呈现完整的文档。因此，如果用户在页面顶部并使用此功能在页面底部查找某些内容（即尚未“延迟渲染”的部分），那么document.getElementById 将返回 null。

作为所有这些的结果，我希望实现一个函数，该函数将简单地遍历文档以搜索此元素。举个例子：

const lookForElement = (id) => {
    let element = document.getElementById(id)
    while (!element) {
        window.ScrollTo(0, 200) //NOT scrolling
        element = document.getElementById(id)
    }
    return element
}

如您所见，如果未找到该元素，则继续滚动 200 像素高度，直到找到该元素。但是window.ScrollTo(0, 200) 不起作用，并且页面始终固定在页面的原始高度。我做错了什么？

Answer 1

1. 是scrollBy
2. 您需要给 DOM 一些时间来做出反应

let testCounter = 0,
id2look4 = ""
const lookForElement = (id) => {
    if (testCounter++ > 3) { // mocking the existance of the div we look for
      document.getElementById("root").innerHTML += `<div id="${id2look4}">ID to look for</div>`
    }

    let element = document.getElementById(id2look4)
    if (element) {
      alert("found")
      element.scrollIntoView()
      return 
    }  
    window.scrollBy(0,200) 
    
    setTimeout(lookForElement,100)
}
id2look4 = "my-1000-id";
lookForElement()

div { height: 500px; border: 1px solid black; }

<div id='root'>
    <div id='my-1-id'>1</div>
    <div id='my-2-id'>2</div>
    <div id='my-3-id'>3</div>
    <div id='my-4-id'>4</div>
    <div id='my-5-id'>5</div>

    // Even more divs

    <div id='my-1500-id'>5</div>
</div>

测试时删除它

    if (testCounter++ > 3) {
      document.getElementById("root").innerHTML += `<div id="${id2look4}">ID to look for</div>`
    }