Upgrade toQuasar v2and use Vue.js 3
Scroll Area

The QScrollArea component offers a neat way of customizing the scrollbars by encapsulating your content. Think of it as a DOM element which has overflow: auto, but with your own custom styled scrollbar instead of browser’s default one and a few nice features on top.

QScrollArea API

Usage

The following examples are best seen on desktop as they make too little sense on a mobile device.

TIP

You can also take a look at Layout Drawer to see some more examples of it in action.

Basic
v1.17+










Styled







Dark
v1.9+




Controlling scrollbar visibility
v1.3+

When using the visible Boolean prop, the default mouse over/leave behavior is disabled, leaving you in full control of the scrollbar visibility.




Delay

When content changes, the scrollbar appears then disappears again. You can set a certain delay (amount of time in milliseconds) before scrollbar disappears again (if component is not hovered):




Scroll position




Scroll event
v1.9.3+

Below is an example of using the @scroll event to synchronize the scrolling between two containers.