Drive Picker triggers unwanted scroll jumps and cannot be prevented (scroll to bottom/top, body scroll jump, desync between browsers)

[avnk45]

Hello,

We are using @googleworkspace/drive-picker-element inside a large web app (Vue 3), on pages that usually have a vertical scroll (long content).
We observed a major usability issue: when the element is mounted (i.e. when the picker UI opens), the page scrolls abruptly to the bottom, then to the top, sometimes multiple times. This happens both in Firefox and Chrome, with subtle differences between browsers.

Steps to reproduce:

Have a page with enough content to vertically scroll (body or main container).
Trigger the (either via v-if or display logic).
Observe: Page immediately scrolls to bottom, then top, then the picker appears, sometimes with scroll position desync (body/viewport no longer aligned).
Expected behavior:
When the picker opens, the rest of the page should NOT scroll. The picker should appear centered or in-place, without disturbing the user's scroll position.

What we've investigated/tried:

Applying overflow: hidden and/or position: fixed to body or html before picker opens to lock scroll. Ineffective: the picker appears to programmatically override scroll or triggers its own scroll-to logic.
Wrapping in overlays or modal parents. The scroll problem persists, sometimes picker renders outside expected stacking context (due to portal/z-index).
Removing the main app content when picker shows: this works (no scroll), but is not maintainable for a real app and breaks UX.
Analyzing the DOM: picker injects iframes/divs with unpredictable styles/positions, some appear to forcibly manipulate scroll position.
No public API option/config found to disable this scroll behavior.
Why this matters:

In production apps, users can lose their scroll position, become visually disoriented, or have a buggy experience when simply trying to pick a file.
Page jumps are particularly problematic for assistive users, screen readers, or forms in progress.
References to similar issues:

#41
#66
Questions / Feature Requests:

Is there an official, supported way to disable/override this scroll behavior?
Can you expose an API, property or event to let us handle scroll locking/prevent scroll manipulation at picker open/close?
If not, could this be considered as an urgent enhancement, as it's critical for usability on large web apps?
Context & Env:

Vue 3 app, using as per documentation, multi-browser (Chrome, Firefox, Edge), both on desktop and mobile.
Thank you for your help and for maintaining this library!
Happy to provide any additional details, demo repo, gif/video if needed.

Have a great day,

Alex

[tpettrov]

Hey, I can we confirm we observe same behaviour in our React SPA app.

[avnk45]

This issue has caused me a lot of hassle in my project because expectations are high. The best workaround I've found while waiting for a viable solution is:

let previousScrollY = 0

/**
 * Temporary workaround for unwanted page scrolling when <drive-picker> opens.
 *
 * When the picker is shown:
 * - Save the current scroll position (previousScrollY).
 * - Lock the document body in place by setting position: fixed and top: 0.
 *   This effectively prevents background scroll while the picker (modal) is visible.
 * - Set width: 100% to avoid layout shifts caused by body switching to fixed positioning.
 * - Scroll to the top (window.scrollTo(0, 0)) to make sure the viewport is consistent
 *   and the picker is fully visible.
 *
 * When the picker is closed:
 * - Restore the original body styles (position/top/width).
 * - Scroll back to the saved position (previousScrollY) so the user keeps their place on the page.
 *
 * FIXME: This is a workaround for a bug in @googleworkspace/drive-picker-element.
 * Please remove this when the library provides a proper internal fix for scroll handling.
 */
watch(
  () => isDrivePickerVisible.value,
  (visible) => {
    if (visible) {
      previousScrollY = window.scrollY
      document.body.style.position = 'fixed'
      document.body.style.top = '0'
      document.body.style.width = '100%'
      window.scrollTo(0, 0)
    } else {
      document.body.style.position = ''
      document.body.style.top = ''
      document.body.style.width = ''
      window.scrollTo(0, previousScrollY)
    }
  },
)

[jpoehnelt]

I'm guessing this is related to the underlying picker library? Can you create an issue at https://issuetracker.google.com/issues/new?component=191628&template=823913 and add the link here?