Ajax를 사용하여 콘텐츠 생성 - ID로 스크롤하면 작동하지 않습니다.

Question

Ajax를 통해 얻은 데이터를 기반으로 페이지 콘텐츠를 생성합니다. 내가 겪고 있는 문제는 특정 ID로 스크롤하려고 할 때 스크롤이 발생하지 않거나 잘못된 위치로 스크롤된다는 것입니다.

SO Q&A를 살펴봤지만 좋은 해결책을 찾지 못했습니다. 많은 답변이 Angular 또는 React에 대한 것이지만 일반 js에 대해서는 실제로 확실한 것은 없습니다.

예를 들어 사용자가 "회사 소개 -> 프로젝트" 링크를 클릭하고 "회사 소개"가 페이지이고 프로젝트가 일부 콘텐츠가 포함된 페이지 끝의 ID에 있다고 가정합니다.

문제는 다른 페이지에서 링크를 클릭할 때 발생합니다.

홈페이지에 있다고 가정하고 About Us 페이지의 프로젝트 섹션(id project) 링크를 클릭합니다. 스크롤이 예상대로 작동하지 않는 경우입니다. 링크된 항목을 클릭하여 About Us 페이지로 이동 시에는 이러한 문제가 발생하지 않습니다.

페이지 데이터가 자바스크립트로 렌더링되기 때문에 이벤트 리스너를 사용할 수 없습니다. DOMContentLoaded或load 이벤트 리스너는 콘텐츠가 생성되기 전에 실행되기 때문입니다.

아래는 작동하지 않은 내 솔루션입니다. ID가 뷰포트에 있는지 확인해야 하고, 그렇지 않은 경우 스크롤해야 합니다.

사용하고 싶지 않습니다 setTimeout 왜냐하면 항상 작동하지 않을 수도 있기 때문입니다(느린 인터넷 속도, 더 많은 콘텐츠(이미지) 등)

어떤 도움이라도 대단히 감사하겠습니다.

으아아아

다른 데이터를 제공할 수 있으면 알려주시기 바랍니다.

Answer 1

지금까지 가장 우아한 솔루션은 아니지만.

더 좋은 방법을 찾으신 분이 계시다면 알려주세요.

EDIT: 사용자가 스크롤한 후에도 프로그래밍 방식 스크롤 문제를 제거하기 위해 코드를 약간 변경했습니다.

으아아아