水平滾動(dòng)不起作用，尤其是在Chrome和iOS Safari中

我目前正在抽屜的設(shè)置屏幕中創(chuàng)建一個(gè)可滾動(dòng)的選項(xiàng)列表。當(dāng)列表再次打開時(shí)，我希望先前選擇的選項(xiàng)自動(dòng)滾動(dòng)到中間。(我使用本地存儲(chǔ)來反映選擇。)

我實(shí)現(xiàn)了下面的代碼，它在Firefox中可以正常工作，但是在Chrome和iOS Safari中不能滾動(dòng)(盡管。主題-輸入:選中+。主題樣本選擇器工作正常，表明選擇本身已正確完成)。此外，在Firefox中，當(dāng)頁面重新加載時(shí)，它可以正常工作，但當(dāng)HTML文件最初打開或在新標(biāo)簽中訪問服務(wù)器時(shí)，它就不起作用了。

<aside class="settings" id="settings">
  <header class="settings__header"><label class="settings-close" for="settingsSwitch"></label></header>
  <div class="settings__container">
      <div class="settings__page">
          <ul class="theme-list">
              <li class="theme-list__item"><input class="theme-input" type="radio" name="theme" id="themeWhite" value="white"><label class="white theme-swatch" for="themeWhite" title="White"></label></li>
              <li class="theme-list__item"><input class="theme-input" type="radio" name="theme" id="themeBlack" value="black"><label class="black theme-swatch" for="themeBlack" title="Black"></label></li>
              <!-- 以下11個(gè) -->
          </ul>
      </div>
  </div>
</aside>
<main class="main">
</main>

.settings-input {
    display: none;
}
.settings {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: 100%;
    height: 100vh;
    transition: all .5s ease-in-out 0s;
    transform: translateX(100%);
}
.settings-input:checked + .settings {
    transform: translateX(0);
}
.theme-list {
    display: flex;
    overflow-x: scroll;
    gap: 1rem;
}
.theme-swatch {
    display: inline-block;
    width: 70px;
    height: 125px;
    background: var(--background-gradient);
    border-radius: 10px;
}

window.addEventListener('load', function() {
    if (window.matchMedia( '(max-width: 600px)' ).matches) {
        const themeModes = ['themeFirts', 'themeSecond', 'themethird'];
        const themeUls = document.getElementsByClassName('theme-list');
        themeModes.forEach((mode, index) => {
            const themes = document.getElementsByName(mode);
            const themeUl = themeUls[index];
            themes.forEach(theme => {
                if (theme.checked) {
                    const selectedSwatch = theme.nextElementSibling;
                    selectedSwatch.scrollIntoView({inline: 'center'});
                }
            });
        });
    }
});

因?yàn)閟crollIntoView()是一個(gè)相對(duì)較新的方法，所以我嘗試將include scrollIntoView替換為below，但是沒有效果。

const swatchRect = selectedSwatch.getBoundingClientRect();
const ulRect = themeUl.getBoundingClientRect();
const xpos = swatchRect.left - (ulRect.left + (ulRect.width / 2)) + themeUl.scrollLeft + (swatchRect.width / 2);
themeUl.scrollLeft = xpos;

在使用Chrome的調(diào)試器進(jìn)行檢查時(shí)，swatchRect和ulRect的所有值都設(shè)置為DOMRect {x: 0，y: 0，width: 0，height: 0，top: 0，...}.但是，當(dāng)我檢索元素并在控制臺(tái)中使用getBoundingClientRect()時(shí)，它返回一個(gè)具有正確整數(shù)值的DOMRect。

這是WebKit瀏覽器特有的問題嗎？或者這可能是一個(gè)根本性的問題，比如在加載過程中side元素不在可視區(qū)域內(nèi)，從而阻止了滾動(dòng)？ 我希望我不只是在做傻事…