function render() const html = state.items.map(item => <div class="item">$item</div> ).join(''); state.frameElement.innerHTML = html;
.viewerframe > :first-child margin-top: 0; viewerframe mode refresh top
document.getElementById('refreshBtn').addEventListener('click', refreshTop); function render() const html = state
Advanced implementations use virtual scrolling (e.g., react-window or tanstack virtual ). Here, "refresh top" means resetting the virtual scroll index to 0 and discarding the cache. state.frameElement.innerHTML = html
setMode('view'); , 0); ;
function Viewerframe( data ) const frameRef = useRef(null); const refreshAndGoTop = () => // 1. Refetch data refetchData(); // 2. Force mode to "refresh" setMode('refreshing'); // 3. After DOM update, scroll frame to top setTimeout(() => if (frameRef.current) frameRef.current.scrollTop = 0; // The "top" command