javascriptcssweb-applicationssticky-footerintersection-observer

Preventing scroll with 100% body height when the virtual keyboard's open?

I have a chat app with sticky header and footer elements. When the mobile virtual keyboard is open, I set the document's height to window.visualViewport.height. E.g. if the browser's height is 1000px and the virtual keyboard is 400px, then window.visualViewport.height is 600px and both <html> and <body> are set to 600px. The header and footer would both appear correctly within the 600px viewport.

However, users can still scroll the whole page up by 400px, meaning they'll see 400px of empty space at the bottom. How can I prevent this empty space from showing up while still having the sticky header/footer?

I tried:

  1. Detecting scroll events, but they aren't fired
  2. Using an IntersectionObserver on an element below the 600px viewport, but it never triggers
  3. Using position: fixed on the footer, but it doesn't stick to the bottom when scrolling
  4. The document's scroll Y position is always 0
  5. Setting navigator.virtualKeyboard.overlaysContent doesn't do anything

Mostly tested in Android + Chrome, but same issue occurs in iOS + Safari.

Video demo, the initial bottom white space is the keyboard: https://i.imgur.com/OMSXAAt.mp4

Edit

I found a hacky solution using window.visualViewport.addEventListener('scroll', ...). On scroll, I'd add some padding to the top of the page equal to window.visualViewport.offsetTop. However, there's some lag, so users can scroll a little, then the scroll handler runs. On iOS Safari, the lag can be more than 1 second. Is there a better solution?

Solution

  • ❌️ A. scroll event @2024/11

    AFAIK, it is impossible (tested on android 10, chrome 130)

    that kind of (screen keyboard displayed) scroll,

    Like some kind of magnifier effect (only decrease viewport)



    Some ways try to avoid it:



    Even Telegram web haven't solve it

    //when you scoll up in chat page:
    at first the input box is fixed at bottom (it's other element scrolling)
    when you scroll at the begin of msg history, the input box will out of view. (it's body scrolling)

    UPDATE: I found visualViewport.onscroll event triggered, but cant prevent scroll

    // triggered but cant prevent
visualViewport.onscroll=function xx(e) {
    e.preventDefault();
    console.log('--- view scroll1:', e)
    return false
}
// triggered but cant prevent
visualViewport.addEventListener('scroll', function(e){
    e.preventDefault();
    console.log('--- view scroll2:', e)
    return false
}, {passive: false})

    ✅ B. viewport interactive-widget=resizes-content @2024/11

    https://www.reddit.com/r/webdev/comments/195vkgu/comment/kht2py0/

    https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#interactive-widget

    https://github.com/bramus/viewport-resize-behavior/blob/main/explainer.md#proposal

    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

    interactive-widget=resizes-content will change the screenkeyboard behivor, documentElement will resize instead of scroll

    then disable overflow scroll is possible.

    //only tested android 10, chrome 130

    ✅ C. js prevent touchmove @shadcn sheet @2024/11

    https://ui.shadcn.com/docs/components/sheet

    I found this awesome site, which fixed the screenkeyboard scroll issue.
    it not use interactive-widget=resizes-content

    I don't know how, yet.
    After some dig, i realized it use js prevent touchmove event (so that scrolling operation not triggered)
    This is a smart roundabout solution (instead of directly prevent scroll which not work).

    // prevent scroll via ontouchmove 
document.documentElement.addEventListener('touchmove', function(e){
    e.preventDefault();
    console.log('-- documentElement touch move:', e.timeStamp, e)
}, {passive: false})

    ✅ D. css prevent touch-action @2024/11

    https://stackoverflow.com/a/69598779/4896468

    An indirect approach similar to js preventing touch move.
    (instead of directly disable scroll which not success)

    html {
    touch-action: none;
    /* ---- this works ---- */
}

    Another * { pointer-events: none; } also works, but lose all interactive.

    //only tested android 10, chrome 130