Intersection Observer

Vue Bootstrap 5 Intersection Observer

mdbIntersectionObserver is a custom directive which allows calling a method when an element is visible on the screen.

Basic usage

Import the directive from mdb-vue-ui-kit and add mdbIntersectionObserver to the directives object. Now you can attach the directive to any html element or component. Check the console to see the result (F12). 

<template>
  <div class="bg-black"
    v-mdb-intersection-observer="{callback: handleObserverVisible, lostVisibility: handleObserverNotVisible }"
    style="width: 50px; height: 50px">
  </div>
</template>
<script>
  import { mdbIntersectionObserver } from 'mdb-vue-ui-kit';

  export default {
    directives: {
      mdbIntersectionObserver,
    },
    setup() {
      const handleObserverVisible = () => console.log('Example 1 is visible!');
      const handleObserverNotVisible = () => console.log('Example 1 is no longer visible!');

      return {
        handleObserverVisible,
        handleObserverNotVisible
      }
    },
  };
</script>
<script setup lang="ts">
  import {
    mdbIntersectionObserver as vMdbIntersectionObserver
  } from 'mdb-vue-ui-kit';

  const handleObserverVisible = () => console.log('Example 1 is visible!');
  const handleObserverNotVisible = () => console.log('Example 1 is no longer visible!');
</script>

If you need to call the given function not only when intersecting, but also immediately after the directive has been inserted, use start modifier 

<template>
  <div class="bg-black"
    v-mdb-intersection-observer="{callback: handleObserverVisibleWithStart, lostVisibility: handleObserverNotVisibleWithStart, start: true }"
    style="width: 50px; height: 50px">
  </div>
</template>
<script>
  import { mdbIntersectionObserver } from 'mdb-vue-ui-kit';

  export default {
    directives: {
      mdbIntersectionObserver,
    },
    setup() {
      const handleObserverVisibleWithStart = () => console.log('Example 2 with start modifier is visible!');
      const handleObserverNotVisibleWithStart = () => console.log('Example 2 with start modifier is no longer visible!');

      return {
        handleObserverVisibleWithStart,
        handleObserverNotVisibleWithStart
      }
    },
  };
</script>
<script setup lang="ts">
  import {
    mdbIntersectionObserver as vMdbIntersectionObserver
  } from 'mdb-vue-ui-kit';

  const handleObserverVisibleWithStart = () => console.log('Example 2 with start modifier is visible!');
  const handleObserverNotVisibleWithStart = () => console.log('Example 2 with start modifier is no longer visible!');
</script>

If you need to call the given function only once when intersecting and then never again, use once modifier 

<template>
  <div class="bg-black"
    v-mdb-intersection-observer="{callback: handleObserverVisibleWithOnce, lostVisibility: handleObserverNotVisibleWithOnce, once: true }"
    style="width: 50px; height: 50px">
  </div>
</template>
<script>
  import { mdbIntersectionObserver } from 'mdb-vue-ui-kit';

  export default {
    directives: {
      mdbIntersectionObserver,
    },
    setup() {
      const handleObserverVisibleWithOnce = () => console.log('Example 3 with once modifier is visible!');
      const handleObserverNotVisibleWithOnce = () => console.log('Example 3 with once modifier is no longer visible!');

      return {
        handleObserverVisibleWithOnce,
        handleObserverNotVisibleWithOnce
      }
    },
  };
</script>
<script setup lang="ts">
  import {
    mdbIntersectionObserver as vMdbIntersectionObserver
  } from 'mdb-vue-ui-kit';

  const handleObserverVisibleWithOnce = () => console.log('Example 3 with once modifier is visible!');
  const handleObserverNotVisibleWithOnce = () => console.log('Example 3 with once modifier is no longer visible!');
</script>

Intersection Observer - API

Import

<script>
  import { mdbIntersectionObserver } from 'mdb-vue-ui-kit';
</script>

Properties

Property Type Default Description
container Object window The scroll event listener will be attached to a parent component instead of the window (default option). For this option to work, the parent node should have overflowY set to auto or scroll
once Boolean false The callback will be triggered only once
start Boolean false The callback will be triggered every time the element is visible and once when the directive is inserted
lostVisibility Function null You can add a function that will execute when element is not visible anymore.