我有以下两个函数...
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()默认不是异步的,任何在其后的命令都不应该在它完成之前运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
这是我的解决方案。
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); }