[英]Why my page scroll when I resize on my browser?
I'm doing a dashboard and I am having a problem.我正在做一个仪表板,但我遇到了问题。
When I resize my window it scrolls by itself.当我调整 window 的大小时,它会自行滚动。
Everything is responsive but I do not understand why it scrolls.一切都是响应式的,但我不明白它为什么会滚动。
Thanks you !谢谢 !
ps: I upload my site if you want check:) ps:我上传我的网站,如果你想检查:)
https://edtmimi.000webhostapp.com/dashBoard/ https://edtmimi.000webhostapp.com/dashBoard/
Update your profileScroll.js file to the code below.将您的 profileScroll.js 文件更新为以下代码。
When you resize your browser, the scroll position changes.当您调整浏览器大小时,滚动 position 会发生变化。 Since you use this to animate and calculate the position for your pages, you need to recalculate them when resizing the window.由于您使用它来为您的页面设置动画并计算 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(); }); });
But I would make it a bit more generic:但我会让它更通用一点:
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); }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.