使用 Ajax 產生內容 - 捲動到 Id 不起作用

Question

我根據透過 ajax 取得的資料產生頁面內容。 我遇到的問題是，當我想滾動到某個 ID 時，滾動要么不會發生，要么滾動到錯誤的位置。

我一直在查看SO問答，但沒有找到任何好的解決方案。很多答案都是針對 Angular 或 React 的，但對於普通 js 來說沒有什麼真正可靠的答案。

舉個例子，假設用戶點擊了一個連結“關於我們 -> 項目”，“關於我們”是頁面，項目位於頁面末尾的 id 中，其中包含一些內容。

當我從不同頁面點擊連結時，就會出現問題。

假設我們在主頁上，我們點擊「關於我們」頁面、項目部分（id 項目）的連結。這是當捲軸無法如預期運作時。如果我們點擊連結項目，當我們進入關於我們頁面時，這個問題就不會發生。

由於頁面資料是用javascript呈現的，我無法使用事件偵聽器DOMContentLoaded或load，因為它們在產生內容之前觸發（我認為）。

以下是我的無效解決方案。它應該檢查 id 是否在視口中，如果沒有，它應該滾動。

我不想使用 setTimeout 因為它可能並不總是有效（網速慢，更多內容（圖像）等）

任何幫助將不勝感激。

function generate(data){
   // code

    let idx = 0 //just in case, so we don't have an infinite loop
    if (window.location.href.indexOf("#") !== -1) {
        const id = window.location.href.split("#")[1];

        const element = document.getElementById(id);
        document.addEventListener('DOMContentLoaded', function () {
            console.log("loaded");
            if (element) {
                while (!isInViewport(id)) {
                    idx = idx + 1;
                    console.log(isInViewport(id))
                    scrollToElement(id);
                    if (idx === 10000){
                        break;
                    }
                };
            }
        });
    }
}

generateContent();


function scrollToElement(id) {
    const element = document.getElementById(id);
    if (element) {
        element.scrollIntoView({
            behavior: 'smooth'
        });
    }
}

function isInViewport(id) {
    const element = document.getElementById(id);
    if (element) {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }
}

如果我可以提供任何其他數據，請告訴我。

Answer 1

雖然它不是迄今為止最優雅的解決方案。

如果有人能找到更好的方法，請告訴我。

編輯：稍微更改了程式碼，即使在用戶滾動後也消除了編程滾動的問題。

function generateContent(data){
   // code

    if (window.location.href.indexOf("#") !== -1) {
        const id = window.location.href.split("#")[1];
        const element = document.getElementById(id);
        if (element) {
            scrollToLoop(id);
        }
    }
}
generateContent();

let isUserScrolling = false;
window.addEventListener("wheel", function () {
    isUserScrolling = true;
});
window.addEventListener("touchmove", function () {
    isUserScrolling = true;
});
function scrollToLoop(id, scrl) {
    let scroll = scrl;
    const element = document.getElementById(id);

    if (element) {
        if (!isInViewport(id) && scroll && !isUserScrolling) {
            scrollToElement(id);
            setTimeout(() => {
                if (!isInViewport(id)) {
                    scrollToLoop(id, true);
                }
            }, 500);
        } else {
            setTimeout(() => {
                if (!isInViewport(id) && scroll && !isUserScrolling) {
                    scrollToLoop(id, true);
                }
            }, 500);
        }
    }
}