{"record":{"id":"3ed4217ec94d1a88","repo":"quasarframework/quasar","slug":"quasar-qinfinitescroll-the-window-scroll-target","errorCode":null,"errorMessage":"[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","messagePattern":"\\[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","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"ui/src/components/infinite-scroll/QInfiniteScroll.js","lineNumber":228,"sourceCode":"        suppressAnchoring.value = false\n        localScrollTarget.removeEventListener('scroll', poll, passive)\n        poll?.cancel?.()\n      }\n    }\n\n    function updateScrollTarget() {\n      if (localScrollTarget && isWorking.value) {\n        localScrollTarget.removeEventListener('scroll', poll, passive)\n      }\n\n      const wasInFixedSubtree = inFixedSubtree\n\n      localScrollTarget = getScrollTarget(rootRef.value, props.scrollTarget)\n      inFixedSubtree =\n        localScrollTarget === window && isInFixedSubtree(rootRef.value)\n\n      if (inFixedSubtree && !wasInFixedSubtree) {\n        console.warn(\n          '[Quasar] QInfiniteScroll: the window scroll target cannot react' +\n            ' to content inside a position:fixed subtree (e.g. a Dialog), so' +\n            ' automatic loading stays off here; set the scroll-target prop' +\n            ' to a scrollable element of the overlay'\n        )\n      }\n\n      if (isWorking.value) {\n        localScrollTarget.addEventListener('scroll', poll, passive)\n\n        if (props.reverse && !inFixedSubtree) {\n          const scrollHeight = getScrollHeight(localScrollTarget),\n            containerHeight = height(localScrollTarget)\n\n          setVerticalScrollPosition(\n            localScrollTarget,\n            scrollHeight - containerHeight\n          )","sourceCodeStart":210,"sourceCodeEnd":246,"githubUrl":"https://github.com/quasarframework/quasar/blob/4841521b5f635a971eb9e2710e5542efd194691b/ui/src/components/infinite-scroll/QInfiniteScroll.js#L210-L246","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Set the scroll-target prop to a scrollable element inside the overlay (e.g. a ref to the scrollable container or a CSS selector)","Use getScrollTarget or a template ref on the dialog's scrollable body and pass it via :scroll-target=\"scrollTargetRef\"","If the list should not paginate in the overlay, disable automatic loading explicitly instead of relying on window scrolling"],"exampleFix":"// before\n<QDialog><QInfiniteScroll :load=\"loadMore\">...</QInfiniteScroll></QDialog>\n// after\n<QDialog>\n  <div ref=\"scrollArea\" style=\"max-height: 400px; overflow: auto\">\n    <QInfiniteScroll :scroll-target=\"scrollArea\" :load=\"loadMore\">...</QInfiniteScroll>\n  </div>\n</QDialog>","handlingStrategy":"type-guard","validationCode":"// before mounting, verify the component is not in a fixed overlay with default target\nconst inOverlay = !!el.closest('.q-dialog, .q-drawer, .q-menu')\nif (inOverlay && !props.scrollTarget) console.warn('Set scroll-target for QInfiniteScroll inside overlay')","typeGuard":"function isInFixedSubtree(el) {\n  for (let n = el; n; n = n.parentElement) {\n    if (getComputedStyle(n).position === 'fixed') return true\n  }\n  return false\n}","tryCatchPattern":null,"preventionTips":["Whenever QInfiniteScroll lives in a dialog/drawer/menu, always set scroll-target to the overlay's scrollable container","Give the scrollable body a template ref and pass it via :scroll-target","Test overlay scrolling behavior after moving lists between page and overlay contexts"],"tags":["quasar","qinfinitescroll","scroll-target","dialog"],"backgroundTag":"scroll-target-in-fixed-subtree","analyzedSha":"4841521b5f635a971eb9e2710e5542efd194691b","analyzedAt":"2026-08-30T01:13:14.944Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}