scrollIntoView wird nach der forEach-Schleife zu früh ausgeführt
P粉504920992
P粉504920992 2023-09-17 00:27:54
0
1
574

Ich habe die folgenden zwei Funktionen...

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', ''); } } 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(); }
Das

sizeSearch()函数正常工作。当调用clearSizeSearch()函数时,所有的

  • 元素按预期重新显示出来,你可以很短暂地看到预期的.active-Element wird in die Ansicht gescrollt, aber dann scrollt es sofort wieder über das Containerelement zurück (oder wird möglicherweise auf diese Weise erneut gerendert, nachdem sich das DOM vollständig stabilisiert hat?).

    Wenn ich es manuell in der Konsole ausführedocument.querySelector('ul.size-ranks li.active').scrollIntoView();,然后运行clearSizeSearch(),那么它就正常工作。这一点,再加上当运行clearSizeSearch()时我可以短暂地看到它滚动到视图中,似乎表明它可能在前面的命令执行完成之前运行,但据我所知,forEach()Die Standardeinstellung ist nicht asynchron. Kein Befehl danach sollte ausgeführt werden, bevor er abgeschlossen ist.

  • P粉504920992
    P粉504920992

    Antworte allen (1)
    P粉633733146

    这是我的解决方案。

    function clearSizeSearch() { document.querySelectorAll('li.empty-search').forEach(e => e.remove()); document.querySelectorAll('ul.size-ranks li').forEach(e => e.style.display = ''); setTimeout(() => { document.querySelector('ul.size-ranks li.active').scrollIntoView(); }, 0); }
      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!