quasarframework/quasar · warning

[Quasar] QInfiniteScroll: the window scroll target cannot re

Error message

[Quasar] QInfiniteScroll: the window scroll target cannot react to content inside a position:fixed subtree (e.g. a Dialog), so automatic loading stays off here; set the scroll-target prop to a scrollable element of the overlay

What it means

QInfiniteScroll detects that its root element sits inside a position:fixed subtree (such as a QDialog) while its resolved scroll target is the window. A fixed subtree never scrolls the window in response to inner content, so automatic loading is disabled and a console warning explains that a scrollable element of the overlay should be used as scroll-target instead.

Source

Thrown at ui/src/components/infinite-scroll/QInfiniteScroll.js:228

        suppressAnchoring.value = false
        localScrollTarget.removeEventListener('scroll', poll, passive)
        poll?.cancel?.()
      }
    }

    function updateScrollTarget() {
      if (localScrollTarget && isWorking.value) {
        localScrollTarget.removeEventListener('scroll', poll, passive)
      }

      const wasInFixedSubtree = inFixedSubtree

      localScrollTarget = getScrollTarget(rootRef.value, props.scrollTarget)
      inFixedSubtree =
        localScrollTarget === window && isInFixedSubtree(rootRef.value)

      if (inFixedSubtree && !wasInFixedSubtree) {
        console.warn(
          '[Quasar] QInfiniteScroll: the window scroll target cannot react' +
            ' to content inside a position:fixed subtree (e.g. a Dialog), so' +
            ' automatic loading stays off here; set the scroll-target prop' +
            ' to a scrollable element of the overlay'
        )
      }

      if (isWorking.value) {
        localScrollTarget.addEventListener('scroll', poll, passive)

        if (props.reverse && !inFixedSubtree) {
          const scrollHeight = getScrollHeight(localScrollTarget),
            containerHeight = height(localScrollTarget)

          setVerticalScrollPosition(
            localScrollTarget,
            scrollHeight - containerHeight
          )

View on GitHub (pinned to 4841521b5f)

Solutions

1. Set the scroll-target prop to a scrollable element inside the overlay (e.g. a ref to the scrollable container or a CSS selector)
2. Use getScrollTarget or a template ref on the dialog's scrollable body and pass it via :scroll-target="scrollTargetRef"
3. If the list should not paginate in the overlay, disable automatic loading explicitly instead of relying on window scrolling

Example fix

// before
<QDialog><QInfiniteScroll :load="loadMore">...</QInfiniteScroll></QDialog>
// after
<QDialog>
  <div ref="scrollArea" style="max-height: 400px; overflow: auto">
    <QInfiniteScroll :scroll-target="scrollArea" :load="loadMore">...</QInfiniteScroll>
  </div>
</QDialog>

// before mounting, verify the component is not in a fixed overlay with default target
const inOverlay = !!el.closest('.q-dialog, .q-drawer, .q-menu')
if (inOverlay && !props.scrollTarget) console.warn('Set scroll-target for QInfiniteScroll inside overlay')

function isInFixedSubtree(el) {
  for (let n = el; n; n = n.parentElement) {
    if (getComputedStyle(n).position === 'fixed') return true
  }
  return false
}

When it happens

Trigger: Placing <QInfiniteScroll> inside a <QDialog>/<QDrawer>/<QMenu> (any position:fixed container) without setting scroll-target to an element inside that overlay; the warning fires once when first detected during updateScrollTarget in setup.

Common situations: Moving a working page-level infinite scroll into a dialog during a refactor, or building an overlay with a scrollable body but leaving the default window scroll target.

Related errors

• Expected a string or a {r, g, b[, a]} object as bgColor
• Expected offset to be between -1 and 1
• Expected a string as propName
• Expected a DOM element
• Expected a string as propName

AI-assisted analysis of quasarframework/quasar@4841521b5f (2026-08-30). Data as JSON: /api/errors/3ed4217ec94d1a88. Report an issue: GitHub.