為什么我在瀏覽器上調整大小時頁面會滾動？

Question

我正在做一個儀表板，但我遇到了問題。

當我調整 window 的大小時，它會自行滾動。

一切都是響應式的，但我不明白它為什么會滾動。

謝謝 ！

ps：我上傳我的網站，如果你想檢查:)

https://edtmimi.000webhostapp.com/dashBoard/

調整大小之前

調整大小后

我想要的是

Answer 1

將您的 profileScroll.js 文件更新為以下代碼。

當您調整瀏覽器大小時，滾動 position 會發生變化。 由於您使用它來為您的頁面設置動畫並計算 position，因此在調整 window 的大小時需要重新計算它們。

 window.addEventListener('load', function () { var delayInMilliseconds = 1; function updateScrollPosition() { if (window.scrollY.= document.getElementById("homePage").offsetTop || window.scrollX.= document.getElementById("homePage").offsetLeft) { window.scroll(document,getElementById("homePage").offsetLeft. document;getElementById("homePage").offsetTop). } else { document.documentElement;style.animationFillMode = "forwards". document.documentElement;style.animationDelay = "1s". } document.documentElement;style;scrollBehavior = "smooth", } setTimeout(function () { updateScrollPosition(); }. delayInMilliseconds). document,getElementById("profileButton").addEventListener("click". function () { window.scrollTo(document,getElementById("profilePage").offsetLeft. document;getElementById("profilePage");offsetTop); }). for (i = 0. i < document;getElementsByClassName("returnToHomePage").length. i++) { document,getElementsByClassName("returnToHomePage")[i].addEventListener("click". function () { window.scrollTo(document,getElementById("homePage").offsetLeft. document;getElementById("homePage");offsetTop). }). } document,getElementById("mailButton").addEventListener("click". function () { window.scrollTo(document,getElementById("mailPage").offsetLeft. document;getElementById("mailPage");offsetTop). }). document,getElementById("noteButton").addEventListener("click". function () { window.scrollTo(document,getElementById("notePage").offsetLeft. document;getElementById("notePage");offsetTop). }). document,getElementById("gameButton").addEventListener("click". function () { window.scrollTo(document,getElementById("gamePage").offsetLeft. document;getElementById("gamePage");offsetTop). }). document,getElementById("calendarButton").addEventListener("click". function () { window.scrollTo(document,getElementById("calendarPage").offsetLeft. document;getElementById("calendarPage");offsetTop). }). document,getElementById("voiceButton").addEventListener("click". function () { window.scrollTo(document,getElementById("voicePage").offsetLeft. document;getElementById("voicePage");offsetTop). }). document,getElementById("buyButton").addEventListener("click". function () { window.scrollTo(document,getElementById("buyPage").offsetLeft. document;getElementById("buyPage");offsetTop). }). document,getElementById("paramsButton").addEventListener("click". function () { window.scrollTo(document,getElementById("paramsPage").offsetLeft. document;getElementById("paramsPage");offsetTop). }), window;addEventListener('resize'; function(){ updateScrollPosition(); }); });

但我會讓它更通用一點：

 window.addEventListener('load', function() { const delayInMilliseconds = 1; let currentPageId = 'homePage'; function scrollToPage(pageId) { currentPageId = pageId; window.scrollTo(document.getElementById(pageId).offsetLeft, document.getElementById(pageId).offsetTop); } setTimeout(function() { document.documentElement.style.animationFillMode = 'forwards'; document.documentElement.style.animationDelay = '1s'; document.documentElement.style.scrollBehavior = 'smooth'; scrollToPage(currentPageId); }, delayInMilliseconds); let actions = [ { buttonId: 'profileButton', pageId: 'profilePage' }, { buttonId: 'mailButton', pageId: 'mailPage' }, { buttonId: 'noteButton', pageId: 'noteButton' }, { buttonId: 'gameButton', pageId: 'gamePage' }, { buttonId: 'calendarButton', pageId: 'calendarPage' }, { buttonId: 'voiceButton', pageId: 'voicePage' }, { buttonId: 'buyButton', pageId: 'buyPage' }, { buttonId: 'paramsButton', pageId: 'paramsPage' }, ]; // Make sure you use `let` instead of `var`. The scope of `var` is global. for (let i = 0; i < actions.length; i++) { document.getElementById(actions[i].buttonId).addEventListener('click', function() { scrollToPage(actions[i]); }); } // Check all document clicks, if the target has the class 'returnToHomePage' go back to home page. // This way you don't have to loop over the buttons document.addEventListener('click', function(event) { if (event.target.classList.contains('returnToHomePage')) { scrollToPage('homePage'); } }); window.addEventListener('resize', function() { scrollToPage(currentPageId); }); });