Идентификатор фрагмента URI для прокрутки до элемента, созданного с помощью JavaScript

Question

Я генерирую HTML с кодом JavaScript при загрузке страницы. Проблема заключается в использовании фрагментов URI, таких как http://example.com/index.html#special-idбраузер не прокручивает автоматически элемент с идентификатором special-id, По крайней мере, этого не происходит в Chrome. Я предполагаю, что это не работает, потому что #special-id не существует при первой загрузке страницы. Только после запуска JavaScript он существует.

Есть ли способ сделать это легко? Я всегда мог добавить код JavaScript для проверки фрагмента URI и прокручивать его каждый раз, когда создаю новый элемент с id приписывать. Но это не всегда так просто в моей ситуации с кодом, который я не всегда контролирую. Я также предпочел бы не использовать MutationObserver если возможно.

Answer 1

Предполагая, что вы знаете динамический идентификатор, просто измените хеш, используя history.replaceState как только JS-UI-Building завершит работу:

const staticText = Array(1000).join("-").split("-").map(() => "This is some text for spacing purposes.").join("\n");
canvas.innerHTML = staticText + "<div id='dynamic-id'>Hello from JS!</div>"

history.replaceState({}, "Title", "#dynamic-id");

:target {
  background-color: yellow;
  font-weight: bold;
  color: red;
  font-size: 3em;
}
#canvas { white-space: pre-wrap; }

<div id="canvas">Just some unvarnished HTML</div>