Scroll Status
Bootstrap 5 Scroll Status plugin
Scroll Status plugin contains MDBScrollProgress component for visual representation of the scroll progress and v-mdb-scroll-status directive for calculating current scroll value on element.
Note: Read the API tab to find all available options and advanced customization
Basic example
Create default Scroll Status with MDBScrollProgress. Pass progress property with the value calculated by v-mdb-scroll-status directive.
Some content here
<template>
<div
class="border"
style="height: 100px; overflow-y: auto"
v-mdb-scroll-status="updateProgress"
>
<MDBScrollProgress :progress="progress" />
<div style="height: 400px; width: 100%">
<p class="mt-2" style="text-align: center">Some content here</p>
</div>
</div>
</template>
<script>
import { mdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
import { ref } from "vue";
export default {
components: {
MDBScrollProgress,
},
directives: {
mdbScrollStatus
},
setup() {
const progress = ref(0)
const updateProgress = (value) => {
progress.value = value;
};
return {
progress,
updateProgress
};
},
};
</script>
Global example
Create element indicating global page scroll level.
<template>
<MDBScrollProgress
v-mdb-scroll-status="{
global: true,
callback: updateProgress
}"
:progress="progress"
/>
</template>
<script>
import { mdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
import { ref } from "vue";
export default {
components: {
MDBScrollProgress,
},
directives: {
mdbScrollStatus
},
setup() {
const progress = ref(0)
const updateProgress = (value) => {
progress.value = value;
};
return {
progress,
updateProgress
};
},
};
</script>
Styling
Color
Change default color of MDBScrollProgress> with
color property.
Some content here
<template>
<div
class="border"
style="height: 100px; overflow-y: auto"
v-mdb-scroll-status="updateProgress"
>
<MDBScrollProgress :progress="progress" color="green" />
<div style="height: 400px; width: 100%">
<p class="mt-2" style="text-align: center">Some content here</p>
</div>
</div>
</template>
<script>
import { mdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
import { ref } from "vue";
export default {
components: {
MDBScrollProgress,
},
directives: {
mdbScrollStatus
},
setup() {
const progress = ref(0)
const updateProgress = (value) => {
progress.value = value;
};
return {
progress,
updateProgress
};
},
};
</script>
Position
Change default vertical position of MDBScrollProgress with
offset.
Some content here
<template>
<div
class="border"
style="height: 100px; overflow-y: auto"
v-mdb-scroll-status="updateProgress"
>
<MDBScrollProgress :progress="progress" :offset="10" />
<div style="height: 400px; width: 100%">
<p class="mt-2" style="text-align: center">Some content here</p>
</div>
</div>
</template>
<script>
import { mdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
import { ref } from "vue";
export default {
components: {
MDBScrollProgress,
},
directives: {
mdbScrollStatus
},
setup() {
const progress = ref(0)
const updateProgress = (value) => {
progress.value = value;
};
return {
progress,
updateProgress
};
},
};
</script>
Height
Change default height of MDBScrollProgress with
height.
Some content here
<template>
<div
class="border"
style="height: 100px; overflow-y: auto"
v-mdb-scroll-status="updateProgress"
>
<MDBScrollProgress :progress="progress" height="20px" />
<div style="height: 400px; width: 100%">
<p class="mt-2" style="text-align: center">Some content here</p>
</div>
</div>
</template>
<script>
import { mdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
import { ref } from "vue";
export default {
components: {
MDBScrollProgress,
},
directives: {
mdbScrollStatus
},
setup() {
const progress = ref(0)
const updateProgress = (value) => {
progress.value = value;
};
return {
progress,
updateProgress
};
},
};
</script>
Modal
One-time modal
Once show modal with once and scrollCallback arguments after reaching value set in
scroll of v-mdb-scroll-status
Some content here
<template>
<div
class="border"
style="height: 100px; overflow: auto"
v-mdb-scroll-status="{
callback: updateProgress,
scroll: 50,
scrollCallback: openModalOnce,
once: true,
}"
>
<MDBScrollProgress :progress="progress" />
<div style="height: 400px; width: 100%">
<p class="mt-2" style="text-align: center">Some content here</p>
<MDBModal
id="modalOnce"
tabindex="-1"
labelledby="modalOnceLabel"
v-model="modalOnce"
>
<MDBModalHeader>
<MDBModalTitle id="modalOnceLabel"
>Scroll Status
</MDBModalTitle>
</MDBModalHeader>
<MDBModalBody>Showing scroll status on 50% once</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" @click="modalOnce = false">Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</div>
</div>
</template>
<script>
import { mdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
import {
MDBModal,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
MDBBtn,
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBScrollProgress,
MDBModal,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
MDBBtn,
},
directives: {
mdbScrollStatus
},
setup() {
const progress = ref(0)
const updateProgress = (value) => {
progress.value = value;
};
const modalOnce = ref(false);
const openModalOnce = () => {
modalOnce.value = true;
};
return {
progress,
updateProgress,
modalOnce,
openModalOnce
};
},
};
</script>
Multiple modal
To show modal more than just one time, simply use only scroll and scrollCalback.
Some content here
<template>
<div
class="border"
style="height: 100px; overflow: auto"
v-mdb-scroll-status="{
callback: updateProgress,
scroll: 50,
scrollCallback: openModalMulti,
}"
>
<MDBScrollProgress :progress="progress" />
<div style="height: 400px; width: 100%">
<p class="mt-2" style="text-align: center">Some content here</p>
<MDBModal
id="modalMulti"
tabindex="-1"
labelledby="modalMultiLabel"
v-model="modalMulti"
>
<MDBModalHeader>
<MDBModalTitle id="modalMultiLabel"
>Scroll Status
</MDBModalTitle>
</MDBModalHeader>
<MDBModalBody
>Showing scroll status on 50% multiple</MDBModalBody
>
<MDBModalFooter>
<MDBBtn color="secondary" @click="modalMulti = false"
>Close</MDBBtn
>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</div>
</div>
</template>
<script>
import { mdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
import {
MDBModal,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
MDBBtn,
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBScrollProgress,
MDBModal,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
MDBBtn,
},
directives: {
mdbScrollStatus,
},
setup() {
const progress = ref(0)
const updateProgress = (value) => {
progress.value = value;
};
const modalMulti = ref(false);
const openModalMulti = () => {
modalMulti.value = true;
};
return {
progress,
updateProgress,
modalMulti,
openModalMulti
};
},
};
</script>
Scroll Status - API
Import
<script>
import {
MDBScrollProgress,
mdbScrollStatus
} from "mdb-vue-scroll-status";
</script>
Properties
MDBScrollProgress
| Name | Type | Default | Description |
|---|---|---|---|
color
|
String | #1266F1 |
Defines color of the progress bar. |
height |
String | 10px |
Defines height of the progress bar. |
offset |
Number | 0 |
Defines offset of the progress bar. |
progress |
Number | 0 |
Pass scroll progress based on v-mdb-scroll-status directive.
|
Arguments
v-mdb-scroll-status
| Name | Type | Default | Description |
|---|---|---|---|
callback
|
Function | |
Function that will be called on every scroll status update event. Use it to update your progress status. |
global
|
Boolean | false |
If value is true, it will show global scroll (window scroll). |
scroll
|
Number | 0 |
Defines value which crossing will trigger scrollCallback.
|
scrollCallback
|
Function | |
Function that will be called when scroll value is reached. Use it for e.g. opening modals.
|
once
|
Boolean | true |
If value is true, it will call scrollCallback only once.
|