QScrollObserver is a Quasar component that emits a
scroll event whenever the user scrolls the page or overflowed container with
.scroll CSS class applied to it.
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
Scroll this page to see the example below in action.
Determining Scrolling Container
All components or directives in Quasar have a simple algorithm to determine the container that supports the scroll:
- if a
scroll-targetproperty is available on the component then it tries to use it as scroll container
- then it searches for a parent DOM element which has the
overflow-autoQuasar CSS helper classes attached to it,
- if none is found, then it considers that the scrolling takes place on the document itself.
Components like QScrollArea, for example, respect this design and have the
scroll class embedded into it, so that QScrollObservable (or any other scrolling component or directive) can successfully detect it and attach the necessary event handlers to it.
Please note that simply attaching
scroll CSS class to a DOM element or on a Vue component will have no effect if the respective element is not overflowed (example, with: CSS
overflow: hidden and a height smaller than its inner content height).
Example of good container:
<!-- Quasar CSS helper 'overflow-hidden' is equivalent to style="overflow: hidden" --> <div class="scroll overflow-hidden" style="height: 100px"> ...content expanding over the 100px height from container... <q-scroll-observer @scroll="scrollHandler" /> <!-- example with `v-scroll` directive --> <div v-scroll="scrollHandler">...</div> </div>
One more example with QScrollArea:
<q-scroll-area style="width: 400px; height: 500px;" class="bg-yellow"> ...content expanding over the 500px height from container... <q-scroll-observer @scroll="scrollHandler" /> </q-scroll-area>
For capturing horizontal scrolling, use the
horizontal Boolean prop:
<q-scroll-observer horizontal @scroll="scrollHandler" />
When scrolling on a Layout with a Page, rather than injecting a QScrollObservable (and by so doing registering additional scroll events) you can take advantage of QLayout´s
@scroll event directly on your component defining the Layout.