- From: Mario Aleo via GitHub <sysbot+gh@w3.org>
- Date: Tue, 27 Jun 2023 22:58:14 +0000
- To: public-css-archive@w3.org
If you are looking for a promise based workaround, we can use the @guswelter solution inside a promise. ``` element.scrollIntoView({ behavior: 'smooth' }); await new Promise(resolve => { new IntersectionObserver( (entries, observer) => { for (const entry of entries) { if (entry.target === element && entry.intersectionRatio >= 0.90) { observer.disconnect(); resolve(); } } } ).observe(element) }); ``` I have a scroll based tab-content system and was looking for a way to set and attribute hidden to apply `visibility: hidden;` for the content that were not visible so the TAB focus behaviour could ignore the other content and thanks to @guswelter solution applied inside Promise I could reach a satisfactory solution. ``` async focusContent(index) { const focusContentElement = this.shadowRoot!.querySelector( `#content > :nth-child(${index + 1})` ); focusContentElement.removeAttribute('hidden'); focusContentElement.scrollIntoView({ behavior: 'smooth' }); await new Promise(resolve => { new IntersectionObserver( (entries, observer) => { for (const entry of entries) { if (entry.target === focusContentElement && entry.intersectionRatio >= 0.90) { observer.disconnect(); resolve(); } } } ).observe(focusContentElement) }); const otherContentElementList = this.shadowRoot!.querySelectorAll( `#content > :not(:nth-child(${index + 1}))` ); for (const contentElement of otherContentElementList) { contentElement.setAttribute('hidden', ''); } this.dispatchEvent(new CustomEvent('tab-changed')); this.dispatchEvent(new CustomEvent('content-changed')); } ``` -- GitHub Notification of comment by mario-aleo Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3744#issuecomment-1610328661 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 27 June 2023 22:58:16 UTC