当我在浏览器上调整大小时，为什么我的页面会滚动？

Question

我正在做一个仪表板，但遇到了问题。

当我调整窗口大小时，它会自行滚动。

一切都是响应式的，但我不明白为什么它会滚动。

感谢您 ！

Answer 1

将您的 profileScroll.js 文件更新为以下代码。当您调整浏览器大小时，滚动位置会发生变化。由于您使用它来制作动画并计算页面的位置，因此在调整窗口大小时需要重新计算它们。window.addEventListener('load', function () {&nbsp; &nbsp; var delayInMilliseconds = 1;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; function updateScrollPosition() {&nbsp; &nbsp; &nbsp; if (window.scrollY != document.getElementById("homePage").offsetTop || window.scrollX != document.getElementById("homePage").offsetLeft) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.scroll(document.getElementById("homePage").offsetLeft, document.getElementById("homePage").offsetTop);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.documentElement.style.animationFillMode = "forwards";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.documentElement.style.animationDelay = "1s";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; document.documentElement.style.scrollBehavior = "smooth";&nbsp; &nbsp; }&nbsp; &nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; updateScrollPosition();&nbsp; &nbsp; }, delayInMilliseconds);&nbsp; &nbsp; document.getElementById("profileButton").addEventListener("click", function () {&nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(document.getElementById("profilePage").offsetLeft, document.getElementById("profilePage").offsetTop);&nbsp; &nbsp; });&nbsp; &nbsp; for (i = 0; i < document.getElementsByClassName("returnToHomePage").length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName("returnToHomePage")[i].addEventListener("click", function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(document.getElementById("homePage").offsetLeft, document.getElementById("homePage").offsetTop);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById("mailButton").addEventListener("click", function () {&nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(document.getElementById("mailPage").offsetLeft, document.getElementById("mailPage").offsetTop);&nbsp; &nbsp; });&nbsp; &nbsp; document.getElementById("noteButton").addEventListener("click", function () {&nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(document.getElementById("notePage").offsetLeft, document.getElementById("notePage").offsetTop);&nbsp; &nbsp; });&nbsp; &nbsp; document.getElementById("gameButton").addEventListener("click", function () {&nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(document.getElementById("gamePage").offsetLeft, document.getElementById("gamePage").offsetTop);&nbsp; &nbsp; });&nbsp; &nbsp; document.getElementById("calendarButton").addEventListener("click", function () {&nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(document.getElementById("calendarPage").offsetLeft, document.getElementById("calendarPage").offsetTop);&nbsp; &nbsp; });&nbsp; &nbsp; document.getElementById("voiceButton").addEventListener("click", function () {&nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(document.getElementById("voicePage").offsetLeft, document.getElementById("voicePage").offsetTop);&nbsp; &nbsp; });&nbsp; &nbsp; document.getElementById("buyButton").addEventListener("click", function () {&nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(document.getElementById("buyPage").offsetLeft, document.getElementById("buyPage").offsetTop);&nbsp; &nbsp; });&nbsp; &nbsp; document.getElementById("paramsButton").addEventListener("click", function () {&nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(document.getElementById("paramsPage").offsetLeft, document.getElementById("paramsPage").offsetTop);&nbsp; &nbsp; });&nbsp; &nbsp; window.addEventListener('resize', function(){&nbsp; &nbsp; &nbsp; updateScrollPosition();&nbsp; &nbsp; });});但我会让它更通用一些：window.addEventListener('load', function() {const delayInMilliseconds = 1;let currentPageId = 'homePage';function scrollToPage(pageId) {&nbsp; &nbsp; currentPageId = pageId;&nbsp; &nbsp; window.scrollTo(document.getElementById(pageId).offsetLeft, document.getElementById(pageId).offsetTop);}setTimeout(function() {&nbsp; &nbsp; document.documentElement.style.animationFillMode = 'forwards';&nbsp; &nbsp; document.documentElement.style.animationDelay = '1s';&nbsp; &nbsp; document.documentElement.style.scrollBehavior = 'smooth';&nbsp; &nbsp; scrollToPage(currentPageId);}, delayInMilliseconds);let actions = [&nbsp; &nbsp; { buttonId: 'profileButton', pageId: 'profilePage' },&nbsp; &nbsp; { buttonId: 'mailButton', pageId: 'mailPage' },&nbsp; &nbsp; { buttonId: 'noteButton', pageId: 'noteButton' },&nbsp; &nbsp; { buttonId: 'gameButton', pageId: 'gamePage' },&nbsp; &nbsp; { buttonId: 'calendarButton', pageId: 'calendarPage' },&nbsp; &nbsp; { buttonId: 'voiceButton', pageId: 'voicePage' },&nbsp; &nbsp; { buttonId: 'buyButton', pageId: 'buyPage' },&nbsp; &nbsp; { buttonId: 'paramsButton', pageId: 'paramsPage' },];// Make sure you use `let` instead of `var`. The scope of `var` is global.&nbsp;for (let i = 0; i < actions.length; i++) {&nbsp; &nbsp; document.getElementById(actions[i].buttonId).addEventListener('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; scrollToPage(actions[i]);&nbsp; &nbsp; });}// 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 buttonsdocument.addEventListener('click', function(event) {&nbsp; &nbsp; if (event.target.classList.contains('returnToHomePage')) {&nbsp; &nbsp; &nbsp; &nbsp; scrollToPage('homePage');&nbsp; &nbsp; }});window.addEventListener('resize', function() {&nbsp; &nbsp; scrollToPage(currentPageId);});});