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.

This is especially useful for desktop as scrollbars are hidden on a mobile device. When on a mobile device, QScrollArea simply wraps the content in a <div> configured for default browser scrolling – so no QScrollArea features apply on such devices.

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 too see some more examples of it in action.

Basic

Basic



Styled

Styled



Controlling scrollbar visibility

v1.3.0+

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



QScrollArea API