useScrollHandler.ts

export function useScrollHandler() {
  const offsets: Array<Number> = [];
  let touchStartY = 0;
  let activeSection = 0;
  let inMove = false;

  const mountHandler = () => {
    calculateSectionOffsets();
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('DOMMouseScroll', handleMouseWheelDOM);  // Mozilla Firefox
    window.addEventListener('mousewheel', handleMouseWheel, { passive: false }); // Other browsers
    window.addEventListener('touchstart', touchStart, { passive: false }); // mobile devices
    window.addEventListener('touchmove', touchMove, { passive: false }); // mobile devices
  }

  const unmountHandler = () => {
    window.removeEventListener('keydown', handleKeyDown);
    window.removeEventListener('mousewheel', handleMouseWheel);  // Other browsers
    window.removeEventListener('DOMMouseScroll', handleMouseWheelDOM); // Mozilla Firefox
    window.removeEventListener('touchstart', touchStart); // mobile devices
    window.removeEventListener('touchmove', touchMove); // mobile devices
  }

  const handleKeyDown = (event: any) => {
    if (event.code == 'ArrowDown' && !inMove) {
      event.preventDefault();
      moveUp();
    } else if (event.code == 'ArrowUp' && !inMove) {
      event.preventDefault();
      moveDown();
    }
  }

  const handleMouseWheel = (event: any) => {
    if (event.wheelDelta < 30 && !inMove) {
      moveUp();
    } else if (event.wheelDelta > 30 && !inMove) {
      moveDown();
    }
    event.preventDefault();
    return false;
  }

  const handleMouseWheelDOM = (event: any) => {
    if (event.detail > 0 && !inMove) {
      moveUp();
    } else if (event.detail < 0 && !inMove) {
      moveDown();
    }
    return false;
  }

  const touchStart = (event: any) => {
    event.preventDefault();
    touchStartY = event.touches[0].clientY;
  }

  const touchMove = (event: any) => {
    if(inMove) return false;
    event.preventDefault();
    
    const currentY = event.touches[0].clientY;
    
    if(touchStartY < currentY) {
      moveDown();
    } else {
      moveUp();
    }
    
    touchStartY = 0;
    return false;
  }

  const moveUp = () => {
    inMove = true;
      
    if(activeSection < offsets.length - 1) activeSection++ ;  
    scrollToSection(activeSection, true);
  }

  const moveDown = () => {
    inMove = true;
      
    if(activeSection > 0) activeSection--;
    scrollToSection(activeSection, true);
  }

  const scrollToSection = (id: number, force = false) => {
    if(inMove && !force) return false;
    
    activeSection = id;
    inMove = true;
    
    document.getElementsByTagName('section')[id].scrollIntoView({behavior: 'smooth'});
    
    setTimeout(() => {
      inMove = false;
    }, 400);
  }

  const calculateSectionOffsets = () => {
    let sections = document.getElementsByTagName('section');
    let length = sections.length;
    for(let i = 0; i < length; i++) {
      let sectionOffset = sections[i].offsetTop;
      offsets.push(sectionOffset);
    }
  }
  return { mountHandler, unmountHandler }
}

One can call mountHandler on vue component mount event and unmountHandler on vue component unmount event and fullscreen sections will become scrolling smoothly.