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.

Installation

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QScrollArea'
    ]
  }
}

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

Basic

Styled

Styled thumb and bar
Styled

Dark

Dark

Controlling scrollbar visibility

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

Controlling 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):

Delay

Scroll position

Scroll Position

Horizontal mode

Horizontal mode

Scroll event

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

Synchronized

QScrollArea API