forEach迴圈後scrollIntoView執行過早
P粉504920992
P粉504920992 2023-09-17 00:27:54
0
1
475

我有以下兩個函數...

function sizeSearch(size) {
    const container = document.querySelector('ul.size-ranks');
    const rankElems = container.querySelectorAll('li');
    rankElems.forEach(e => {
        e.style.display = 'none';
        e.classList.remove('active');
    });

    const sizeID = size.replace(/\D/g,'') + '-rank';
    const sizeElem = document.getElementById(sizeID);
    if (sizeElem) {
        sizeElem.classList.add('active');
        sizeElem.style.display = '';
    } else {
        container.insertAdjacentHTML('beforeend', '<li class="empty-search">尺寸未找到</li>');
    }
}

function clearSizeSearch() {
    document.querySelectorAll('li.empty-search').forEach(e => e.remove());
    document.querySelectorAll('ul.size-ranks li').forEach(e => e.style.display = '');
    document.querySelector('ul.size-ranks li.active').scrollIntoView();
}

sizeSearch()函數正常運作。當呼叫clearSizeSearch()函數時,所有的<li>元素會如預期重新顯示出來,你可以很短暫地看到預期的.active#元素滾動到視圖中,但隨後它立即滾動回容器元素的頂部(或者也許在DOM完成安定後重新渲染為此方式?)。

如果我在控制台中手動運行document.querySelector('ul.size-ranks li.active').scrollIntoView();,然後運行clearSizeSearch(),那麼它就正常工作。這一點,再加上當運行clearSizeSearch()時我可以短暫地看到它滾動到視圖中,似乎表明它可能在前面的命令執行完成之前運行,但據我所知,forEach()預設不是異步的,任何在其後的命令都不應該在它完成之前運行。

P粉504920992
P粉504920992

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!