19

There are a lot of old questions sort of (but not quite) about this, but as I couldn't find anything modern, I thought I'd ask again with the hope of receiving a modern answer.

I am working on a hobbyist responsive web app, but I'm having trouble with input focus on iOS. I would like the input to scroll to just above the iOS keyboard on focus (or not scroll), but iOS wants to center that control no matter what.

In the attached GIF, you can see the behavior I'm seeing, and then I scroll at the end to indicate what I'd like to happen as soon as the focus event is triggered.

scrolling behavior

One thing I found that sort of works, but I'd like something better: the following code works, but has a noticeable delay between the scroll you see in the GIF and the window returning to the position I'd like it. Also, if I adjust the setTimeout() timing below ~400, it doesn't work. Does iOS have some block during its focus scroll bump?

element.addEventListener('focus', (e) => { setTimeout(() => { window.scroll(0,0) }, 500) });

 

Update #1

So far, the only solution I've tried that's worked is the following, which feels pretty janky (where scrollLock is defined elsewhere in focus and blur listeners):

document.addEventListener('scroll', (e) => { if (scrollLock && document.documentElement.scrollTop > 100) { document.documentElement.scrollTop = 100; } });

All the solutions involving preventDefault() or window.scroll calls have not prevented the scroll pictured above, but actively monitoring the scroll and forcing it back to where I want it does work. Would love for this not to be the answer, however!

Improve this question
6
  • Do you have that much height to the container? Could you make window.scroll(0,0) work on click of a button or something rather than focus? Commented Mar 22, 2020 at 8:45
  • The container height doesn't seem to matter to mobile Safari (and it's a flex container, but it shouldn't take more than available view height). And I could trigger on other than focus, but that won't solve that initial scroll iOS does. Commented Mar 22, 2020 at 8:50
  • How about trying this solution? stackoverflow.com/a/38621037/1746830 Let me know how it goes. Commented Mar 22, 2020 at 9:25
  • One of the solutions I came across is - Keep a hidden element somewhere around footer. Watch for focus event on input and make that hidden element visible. Maybe this would do the trick. Commented Mar 22, 2020 at 10:08
  • Thanks for the research @Rayon! Unfortunately those solutions didn't work, but I did find one possibility that I've added as an update to the OP. Commented Mar 23, 2020 at 17:01

4 Answers 4

Reset to default
3

One thing that worked for us is to call a scroll event 50ms after getting focus. So if you click into the text field a focus event is triggered. In that event we trigger a setTimeout(() => window.scrollTo(0,100), 50).

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Similar issue with iOS 15, in my specific case the body was scrolling horizontally when an input element towards the right side of the page became focused. Adding position: fixed to the body and html elements fixed this for me, but I don't have any scrolling (Single Page App) so this may cause more problems for others.

Improve this answer

Comments

0

I was using a bootstrap-vue modal with a text input and on focus/tap of the input field Android chrome would scroll to the bottom of the modal (looks similar to your video), if i scrolled back up and typed it stayed in focus but tapping again it would scroll again back to same spot.

From this answer, here's what worked:

html,body{ -webkit-overflow-scrolling : touch !important; overflow: auto !important; }
Improve this answer

Comments

0

I finished with this in my modal component:

import { UAParser } from 'ua-parser-js'; export const Modal = () => { // modal code useEffect(() => { // Fix iOS 26 viewport issue causing non-restoring scroll change after input focus // https://stackoverflow.com/questions/60797340/ios-safari-prevent-or-control-scroll-on-input-focus const { current } = contentRef; if (current === null || UAParser(navigator.userAgent).browser.major !== '26') return () => {}; const inputs = current.querySelectorAll('input'); let timeout: NodeJS.Timeout; const onBlur = () => { timeout = setTimeout(() => { window.scrollTo(0, 0); }, 50); }; inputs.forEach((input) => { input.addEventListener('blur', onBlur); }); return () => { clearTimeout(timeout); inputs.forEach((input) => { input.removeEventListener('blur', onBlur); }); }; }, []); // modal return }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.