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

Question

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

当我调整 window 大小时，它会自动滚动。

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

谢谢！

ps: 如果你想查看，我上传我的网站:)

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

Before resize

After resize

What I want

Answer 1

将您的 profileScroll.js 文件更新为以下代码。

当您调整浏览器大小时，滚动位置会发生变化。由于您使用它来为页面设置动画和计算位置，因此在调整 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);
});
});

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

Why my page scroll when I resize on my browser?

html

javascript

css

scroll

resize