When tabbing up/down (and it activates a scroll), the scroll is instantaneous (not smooth) and doesn't land cleanly on one value.
If you put this in the Console of any site, you can compare the different scrolling behaviors:
document.addEventListener("scroll", () => {
console.log("Scrolled");
console.log(window.scrollY);
})
Scroll up/down by mouse (Works fine)
Scroll up, the last print of window.scrollY will be smaller than the previous one because it's closer to the top of the viewport
Scroll down, the last print of window.scrollY will be larger than the previous one because it's farther from the top of the viewport
Scroll up/down by arrow keys (Works fine, the same way as above)
When tabbing, and it activates a scroll, this is where it works incorrectly
Scrolling down, the last print of window.scrollY will be 1 pixel less than the previous one (*But NOT always. Sometimes it's okay.)
Scrolling up, the last print of window.scrollY will be 1 pixel more than the previous one
E.g. Tab DOWN --> Activates scroll (non-smooth)
PRINTS IN CONSOLE:
3964.2666015625
Scrolled
4709.2666015625
Scrolled
4708.2666015625 (It "lands" here)
I tested this same thing in Edge and Chrome and they print window.scrollY correctly and scripts work good there.