Scroll Area     

Quasar offers a neat way of customizing the scrollbars with the help of QScrollArea component which can encapsulate 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.


Edit /quasar.conf.js:

framework: {
components: ['QScrollArea']

Basic Usage

QScrollArea supports scrolling by user dragging the custom scrollbars or by using the mousewheel. If on a desktop that has a touch screen then scrolling will work with touch actions too.

In this example we set a height to force
custom scrollbars to appear
<q-scroll-area style="width: 400px; height: 100px;">
<div v-for="n in 10">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.

Vue Properties

thumb-styleObject with CSS properties and values for styling the thumb of custom scrollbar.
content-styleObject with CSS properties and values for styling the container of QScrollArea.
content-active-styleObject with CSS properties and values for styling the container of QScrollArea when scroll area becomes active (is mouse hovered).
delayNumber (in milliseconds, default is 1000) defining a delay before custom scrollbars become visible after mouse is hovering the container.

Custom Scrollbar Example

Custom scrollbar thumb with a delay of
1.5 seconds before appearing after hovering
the mouse over the scrollable content
style="height: 200px"
right: '4px',
borderRadius: '5px',
background: 'red',
width: '10px',
opacity: 1

Vue Methods

setScrollPosition(offset[, duration])Set scroll position to an offset. If a duration (in milliseconds) is specified then the scroll is animated.