Closed samuelgoddard closed 2 years ago
Hey Sam, thanks! I'm currently on vacation but as soon as I get back I'll check it out.
Initially I wouldn't imagine there'd be a problem - since we're technically bound to the window scroll - however if you're saying it's not working correctly I might be missing something.
I'll let you know next week 🙂
Hey @samuelgoddard, apologies for the delay. I've been able to take a look at this and believe I've got a solution:
useEffect(() => {
const onTab = (e) => {
if (e.key === 'Tab' || e.keyCode === 9) {
const el = document.activeElement;
const rect = el.getBoundingClientRect();
const windowWidth =
window.innerWidth || document.documentElement.clientWidth;
const windowHeight =
window.innerHeight || document.documentElement.clientHeight;
const isInViewport =
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= windowHeight &&
rect.right <= windowWidth;
if (!isInViewport) {
window.scrollTo(0, el.offsetTop);
}
}
};
document.addEventListener('keyup', onTab);
return () => document.removeEventListener('keyup', onTab);
}, []);
You'll find a working example here: https://stackblitz.com/edit/scroller-motion-tab-scroll?file=src%2FuseTabScroll.js
Do let me know if any issues! 🙂
Hey! Just started using this and I can't praise it enough. How hard would including accessible tabbing be? At the moment if I tab through internal links throughout the page the scroll doesn't move with me. I know this is common with smooth scroll libraries so i'm guessing it'd be quite hard to implement?
Thanks again for the awesome work on this so far :)