Radunia components

vScroll directive

Scroll an element into view. Adding a value to the binding permits you to define a y-offset. This is useful if there's a navbar on top of your page.

Usage

Register the following directive/s:

import vScroll from '../../directives/vScroll.js';

// ...

app.directive('scroll', vScroll)

Example

<template>
  <h2 v-scroll>I am hidden under the navbar</h2>
  <h2 v-scroll="80">I am scrolled into view just right</h2>
</template>

Full directive's code

vScroll.js

const vScroll = {
  mounted: (el, binding) => {
    el.style.cursor = 'pointer';
    el.addEventListener('click', () => {
      let coord = 0;
      coord = binding.value
        ? el.getBoundingClientRect().top + window.scrollY - binding.value
        : el.getBoundingClientRect().top + window.scrollY;
        window.scroll({ top: coord, behavior: 'smooth' });  // (2)
    });
  },
};

export default vScroll;