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.

Scroll status for the latest Bootstrap 5. Creates a progress bar indicating page or component scroll level.

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>
<script setup lang="ts">
  import { mdbScrollStatus as vMdbScrollStatus , MDBScrollProgress } from "mdb-vue-scroll-status";
  import { ref } from "vue";

  const progress = ref(0)
  const updateProgress = (value: number) => {
      progress.value = value;
  };
</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>
<script setup lang="ts">
  import { mdbScrollStatus as vMdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
  import { ref } from "vue";

  const progress = ref(0)
  const updateProgress = (value: number) => {
    progress.value = value;
  };
</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>
<script setup lang="ts">
  import { mdbScrollStatus as vMdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
  import { ref } from "vue";

  const progress = ref(0)
  const updateProgress = (value: number) => {
    progress.value = value;
  };
</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>
<script setup lang="ts">
  import { mdbScrollStatus as vMdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
  import { ref } from "vue";

  const progress = ref(0)
  const updateProgress = (value: number) => {
    progress.value = value;
  };
</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>
<script setup lang="ts">
  import { mdbScrollStatus as vMdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
  import { ref } from "vue";

  const progress = ref(0)
  const updateProgress = (value) => {
    progress.value = value;
  };
</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>
<script setup lang="ts">
  import { mdbScrollStatus as vMdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
  import {
    MDBModal,
    MDBModalHeader,
    MDBModalTitle,
    MDBModalBody,
    MDBModalFooter,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const progress = ref(0)
  const updateProgress = (value: number) => {
    progress.value = value;
  };

  const modalOnce = ref(false);
  const openModalOnce = () => {
    modalOnce.value = true;
  };
</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>
<script setup lang="ts">
  import { mdbScrollStatus as vMdbScrollStatus, MDBScrollProgress } from "mdb-vue-scroll-status";
  import {
    MDBModal,
    MDBModalHeader,
    MDBModalTitle,
    MDBModalBody,
    MDBModalFooter,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const progress = ref(0)
  const updateProgress = (value: number) => {
    progress.value = value;
  };

  const modalMulti = ref(false);
  const openModalMulti = () => {
    modalMulti.value = true;
  };
</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.