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.
Change Scroll Container Position
We can change the scroll container position programmatically with the setScrollPosition method:
<!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="row q-gutter-md q-mb-md">
<q-btn
:label="`Scroll to ${position}px`"
color="primary"
@click="scroll"
></q-btn>
<q-btn
:label="`Animate to ${position}px`"
color="primary"
@click="animateScroll"
></q-btn>
</div>
<q-scroll-area
ref="scrollArea"
style="height: 200px; max-width: 300px;"
:delay="1200"
>
<div v-for="n in 100" :key="n" class="q-py-xs">
Lorem ipsum dolor sit amet
</div>
</q-scroll-area>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
position: 300
},
methods: {
scroll() {
this.$refs.scrollArea.setScrollPosition(this.position);
this.position = Math.floor(Math.random() * 100) * 20;
},
animateScroll() {
this.$refs.scrollArea.setScrollPosition(this.position, 300);
this.position = Math.floor(Math.random() * 100) * 20;
}
}
});
</script>
</body>
</html>
The first argument of setScrollPosition is the scroll position to set and the 2nd argument is the delay.
Horizontal Scroll Container
We can add a horizontal scroll container 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">
<q-scroll-area
horizontal
style="height: 210px; width: 230px;"
class="bg-grey-1 rounded-borders"
>
<div class="row no-wrap">
<div
v-for="n in 10"
:key="n"
style="width: 150px;"
class="q-pa-sm"
>
Lorem ipsum dolor sit amet
</div>
</div>
</q-scroll-area>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We can watch the scroll position of a scroll container by listening to the scroll event:
<!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 row">
<q-scroll-area
style="height: 200px;"
class="col"
ref="first"
@scroll="onScrollFirst"
>
<div v-for="n in 100" :key="n" class="q-pa-xs">
Lorem ipsum dolor sit amet
</div>
</q-scroll-area>
<q-scroll-area
style="height: 200px;"
class="col"
ref="second"
@scroll="onScrollSecond"
>
<div v-for="n in 100" :key="n" class="q-pa-xs">
Lorem ipsum dolor sit amet
</div>
</q-scroll-area>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
scroll(source, position) {
if (this.ignoreSource === source) {
this.ignoreSource = null;
return;
}
const target = source === "first" ? "second" : "first";
this.ignoreSource = target;
this.$refs[target].setScrollPosition(position);
},
onScrollFirst({ verticalPosition }) {
this.scroll("first", verticalPosition);
},
onScrollSecond({ verticalPosition }) {
this.scroll("second", verticalPosition);
}
}
});
</script>
</body>
</html>
The onScrollFirst and onScrollSecond methods are the scroll containers.
In each method, we call the scroll method to scroll the other scroll container by calling the setScrollPosition method of it.
The scroll position is set to the verticalPosition value.
Conclusion
We can set the scroll container position and watch scroll events with Quasar’s scroll container.
