Is there any way to detect that the user has focused on an input that is under the fixed footer?
I have a form that allows the user to enter multiple items and keep adding items. They normally are able to tab into the input boxes and the screen scrolls up automatically. After the addition of a sticky footer, it appears that the page doesn't read the footer as blocking the view. The scrollintoview() only scrolls the page up a little bit but is still covered by the footer. Additionally, the element.scrollintoview is not triggered until the user tabs into an input box that is actually outside of the screen instead of being obscured by the fixed footer.
I even tried modifying the tabindex, but the issue seems to be the fixed footer.
scrollIntoView is still an experimental feature. You can scroll to the element by setting scrollTop of the page (or scrollable container) manually.
Just take the element's (your input) position via element.getBoundingClientRect().top and if it's lower than the viewport height, set document.scrollTop (or container.scrollTop) considering your footer height