亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當我在瀏覽器上調整大小時,為什么我的頁面會滾動?

當我在瀏覽器上調整大小時,為什么我的頁面會滾動?

吃雞游戲 2023-11-02 21:50:49
我正在做一個儀表板,但遇到了問題。當我調整窗口大小時,它會自行滾動。一切都是響應式的,但我不明白為什么它會滾動。感謝您 !
查看完整描述

1 回答

?
繁星淼淼

TA貢獻1775條經驗 獲得超11個贊

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

當您調整瀏覽器大小時,滾動位置會發生變化。由于您使用它來制作動畫并計算頁面的位置,因此在調整窗口大小時需要重新計算它們。

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);

});

});


查看完整回答
反對 回復 2023-11-02
  • 1 回答
  • 0 關注
  • 163 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號