- 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