Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Scroll Observer
We can watch the scroll position of the scroll container with the q-scroll-observer component.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<div class="scroll overflow-scroll" style="height: 100px;">
<div v-for="n in 100">lorem ipsum</div>
<q-scroll-observer @scroll="onScroll"></q-scroll-observer>
</div>
<div>{{scrollInfo}}</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
scrollInfo: {}
},
methods: {
onScroll(info) {
this.scrollInfo = info;
}
}
});
</script>
</body>
</html>
We add the q-scroll-observer component and listen to the scroll event with it.
Then we get the info from the onScroll event handler.
The info parameter is something like:
{ "position": 1100, "direction": "down", "directionChanged": false, "inflexionPosition": 0 }
position has the scroll position in pixels.
direction has the scroll direction.
directionChanged tells us whether the scroll direction has changed.
inflexionPosition is the last scroll position where the user changed the scroll position.
We can also add the v-scroll position to watch the scroll position:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<div class="scroll overflow-scroll" style="height: 100px;">
<div v-for="n in 100">lorem ipsum</div>
<div v-scroll="onScroll"></div>
</div>
<div>{{scrollInfo}}</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
scrollInfo: {}
},
methods: {
onScroll(info) {
this.scrollInfo = info;
}
}
});
</script>
</body>
</html>
We get the scroll position with the info parameter.
The q-scroll-observer also works inside the q-scroll-area component:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-scroll-area style="height: 100px;" class="bg-yellow">
<div v-for="n in 100">lorem ipsum</div>
<q-scroll-observer @scroll="onScroll"></q-scroll-observer>
</q-scroll-area>
<div>{{scrollInfo}}</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
scrollInfo: {}
},
methods: {
onScroll(info) {
this.scrollInfo = info;
}
}
});
</script>
</body>
</html>
We can also watch horizontal scrolling with the horizontal prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<div
class="scroll overflow-scroll"
style="width: 90vw; height: 100px;"
>
<span v-for="n in 1000">{{n}}</span>
<q-scroll-observer
horizontal
@scroll="onScroll"
></q-scroll-observer>
</div>
<div>{{scrollInfo}}</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
scrollInfo: {}
},
methods: {
onScroll(info) {
this.scrollInfo = info;
}
}
});
</script>
</body>
</html>
Conclusion
We can add the Quasar’s q-scroll-observer component to watch the scroll position in our Vue app.
