Programming Vue.js Fullpage Scroll

Programming Vue.js Fullpage Scroll Thumbnail
Published on 3. June 2019Last updated on 25. May 2020

With Fullpage Scroll, normal scrolling is deactivated and you are always scrolled exactly into the next section. Here you can learn step by step how to program this feature yourself with Vue.js.



To make it clear right from the start what the result will look like, I’ve already prepared a demo here. This version is supported by all common browsers and also works on mobile devices.

However, there is a small problem in the Microsoft Edge Browser (successor of IE): The pure Smooth Scroll is not supported here. The scrolling is a bit jerky, but all functions are still usable. Thus we have created a nice workaround.

See the Pen Vue.js Fullpage Scroll by WebDEasy (@WebDEasy) on CodePen.

If you’re still looking for design inspirations, I have two more pages here that have, in my opinion, set the full page scroll extremely well in scene:

Fullpage Scroll Frameworks

I know there are already some really good Vue.js fullpage scroll frameworks out there, like this one. However, it’s much cooler to program it yourself. And you don’t have so many “unnecessary” functions on your site that you don’t need.

If you’re not a friend of Vue.js, you can do the same with React, AngularJS or jQuery. The procedure is mostly similar. Individual functions can of course be adapted to the frameworks.


HTML Structure

First we need a container in which our Vue.js App runs. Therefore we create a container #app. There the rest of the HTML comes in.

<div id="app">
    <!-- CONTENT HERE -->

Next, we create our individual sections. There you can then pack in and design any content you like.

<section class="fullpage">
    <h1>Section 1</h1>
<section class="fullpage">
    <h1>Section 2</h1>
<section class="fullpage">
    <h1>Section 3</h1>
<section class="fullpage">
    <h1>Section 4</h1>

In the next step we want to create the side menu. This allows you to navigate to another section by clicking on it and the active section is always displayed.

<div class="sections-menu">
     v-bind:class="{active: activeSection == index}"
     v-for="(offset, index) in offsets"

To this block it now needs some explanation: To make the menu we make a wrapper .sections-menu. In it is a span tag which contains some attributes for Vue.js. So here is the exact explanation:

v-bind:class {active: activeSection == index} The tag gets the class active if the current loop pass is equal to the active section.
v-on:click scrollToSection(index) Clicking on the link calls the scrollToSection() function. The parameter is the loop through and therefore our Section ID.
v-for (offset, index) in offsets The link is repeated according to the number of elements in the offsets array. The variable index is our Section ID.
v-bind:key index To keep each loop pass unique, we set our section ID as the key for the for directive.


In order for the effect of the full page scroll to come into its own, the individual sections should be at least 100vh (i.e. exactly screen height). So you have to see that the content of a section is adjusted to exactly this height.

.fullpage {
  height: 100vh;
  width: 100%;

In our example, we only have a heading and subheading. For inspiration take a look at the demos linked above.


I also kept the navigation menu as simple as possible. White points, where the active point is stronger and bigger. In addition, the menu is always on the right side of the screen. The CSS looks like this:

.sections-menu {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);

.sections-menu .menu-point {
  width: 10px;
  height: 10px;
  background-color: #FFF;
  display: block;
  margin: 1rem 0;
  opacity: .6;
  transition: .4s ease all;

.sections-menu {
  opacity: 1;
  transform: scale(1.5);

CSS for positioning the font, etc. I did not discuss here, because they are basics and have nothing to do with the actual feature. You can find the complete code on my pen on Codepen.

Vue.js (JavaScript)

The JavaScript has been the most elaborate thing here. We have to cover all modern browsers as well as mobile devices.

Initialize Vue.js App

We start initializing the Vue.js App. We have already created the #app container in the HTML.

var app = new Vue({
  el: '#app',

Declaring and Initializing Variables

Now we declare and initialize the variables. Later it becomes clear which variable we need, if the name doesn’t already tell us.

data: {
    inMove: false,
    activeSection: 0,
    offsets: [],
    touchStartY: 0

Calculate offsets

Now we want to calculate the offsets (upper edge of the sections) of the individual sections. This gives us the advantage that we save computing power, because we don’t have to recalculate it every time we scroll.

We run a loop over all section elements and store the offset in our global offsets array.

calculateSectionOffsets() {
    let sections = document.getElementsByTagName('section');
    let length = sections.length;

    for (let i = 0; i < length; i++) {
        let sectionOffset = sections[i].offsetTop;

The function is called once when creating the application in the created() function.

created() {

Event Listener

We need some event listeners to intercept the scroll movement for desktop and swipe on mobile devices. We register these listeners in the created() function.

window.addEventListener('DOMMouseScroll', this.handleMouseWheelDOM); // Mozilla Firefox
window.addEventListener('mousewheel', this.handleMouseWheel, {
    passive: false
}); // Other browsers

window.addEventListener('touchstart', this.touchStart, {
    passive: false
}); // mobile devices
window.addEventListener('touchmove', this.touchMove, {
    passive: false
}); // mobile devices

We also remove the event listeners when quitting the application in the destroy() function.

destroyed() {
    window.removeEventListener('mousewheel', this.handleMouseWheel, {
        passive: false
    }); // Other browsers
    window.removeEventListener('DOMMouseScroll', this.handleMouseWheelDOM); // Mozilla Firefox

    window.removeEventListener('touchstart', this.touchStart); // mobile devices
    window.removeEventListener('touchmove', this.touchMove); // mobile devices

As you can see from the comments, there are different events for different browsers. For some browsers the parameter passive: false is given. This parameter has to be inserted.

I tried a lot of scrolling until it worked smoothly. I could only get the result with this parameter. In addition, error messages were displayed in the browser console.

Scroll Function

This function is already called by our HTML links. Herewith we scroll to the section. The parameter id is the Section ID. The variable inMove makes sure that we have a small cooldown. This means that we can only scroll every 400ms (0.4s). With the parameter force set to true we can skip the cooldown.

scrollToSection(id, force = false) {
    if (this.inMove && !force) return false;

    this.activeSection = id;
    this.inMove = true;

        behavior: 'smooth'

    setTimeout(() => {
        this.inMove = false;
    }, 400);

Recognize Scroll Direction

The handleMouseWheel function is the event listener of the scroll event on desktop devices (mousewheel & DOMMouseScroll).

Via the variable wheelDelta of the event we can see if the user scrolls up or down. Accordingly, our moveUp() or moveDown() function is called, which is created in the next step. At the end, e.preventDefault() and return false; abort the event.

handleMouseWheel: function(e) {

    if (e.wheelDelta < 30 && !this.inMove) {
    } else if (e.wheelDelta > 30 && !this.inMove) {

    return false;

Scroll section up and down

These two functions are only responsible for scrolling up or down once. If we scroll down and the section is smaller than 0, we scroll to the last section. On the other hand, if the new section is larger than the number of sections, we scroll to the first section. 0 is the first section.

moveDown() {
    this.inMove = true;

    if (this.activeSection < 0) this.activeSection = this.offsets.length - 1;

    this.scrollToSection(this.activeSection, true);
moveUp() {
    this.inMove = true;

    if (this.activeSection > this.offsets.length - 1) this.activeSection = 0;

    this.scrollToSection(this.activeSection, true);

With this we have created an endless scroll. If you don’t want to do this, you simply can’t do a Swipe, so the user can only scroll in the other direction at the ends.

Detect Mobile Swipe

We have the touchstart and touchmove events on the move, through which we can see where the user is scrolling. When the user starts scrolling, touchStart() is called. There we store the Y position. When the user then moves his finger on the display, touchMove() is called.

We then compare these two values and see whether the user scrolls up or down. Accordingly, our moveUp() or moveDown() function, which we created earlier, is called.

touchStart(e) {

    this.touchStartY = e.touches[0].clientY;
touchMove(e) {
    if (this.inMove) return false;

    const currentY = e.touches[0].clientY;

    if (this.touchStartY < currentY) {
    } else {

    this.touchStartY = 0;
    return false;


As you can see, you can add your own features or remove parts if you don’t like them. Fullpage Scroll is a very chic feature and when used properly you can create very nice results. Some inspirations you already got to know during the demos.

You can find the complete code on my pen on Codepen.

If you have suggestions for improvement or feedback, please feel free to add them to your comments! 🙂

Related Posts
Join the Conversation


  1. Hallo erstmal,

    danke für das Tutorial!
    Leider tritt bei mir ständig ein Fehler auf, den ich mir nicht erklären kann:
    Im einen Moment funktioniert alles problemlos, doch wenn ich auf der ersten Seite nach oben Scrolle, bekomme ich den Fehler: “Uncaught TypeError: Cannot read property ‘scrollIntoView’ …”
    Er findet wohl keine Sections mehr, denn das Menü verschwindet und ich kann nicht mehr scrollen.

    Vielen Dank und viele Grüße

    1. Das Problem konnte ich mittlerweile beheben. Es lag daran, dass das HTML wohl länger zum laden braucht/vor dem JS geladen wird. Dadurch kann das Script noch keine Sektionen finden.
      Gelöst habe ich das ganze wie folgt:
      setTimeout(() => {
      let sections = document.getElementsByClassName("fullpage")
      let length = sections.length;
      for(let i = 0; i < length; i++) {
      let sectionOffset = sections[i].offsetTop;
      }, 200);

      Viele Grüße

      1. Oke, hatte Dir gerade schon geantwortet, habe erst jetzt Deine Antwort gesehen. Danke für die Rückmeldung! 🙂 Das vermerke ich beim nächsten Überarbeiten auf jeden Fall.

    2. Hi Joshua,
      lass Dir mal den Wert this.activeSection in der moveDown() Funktion ausgeben und schau ob dieser korrekt berechnet wurde. Die Fehlermeldung besagt ja, dass die übergeben Section nicht gefunden wurde. Vielleicht hilft Dir das weiter, ansonsten melde Dich gerne nochmal. 🙂

      Viele Grüße

  2. Hey there would you mind stating which blog platform you’re using?
    I’m looking to start my own blog in the near future but I’m having a tough time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems different then most blogs and
    I’m looking for something unique. P.S Sorry for being off-topic
    but I had to ask!

    1. Hey, I’m using WordPress as CMS. But I made the theme myself, so it’s completly custom. 🙂
      There are a lot of good CMS solutions, take the CMS you prefer.


  3. Hello.

    First of all I’d like to thank you for the wonderful Fullpage Scroll. I used it on one of my projects.

    Got one question though. Is there any chance to make scrolls to work a little bit slower? I mean when you scroll up and down the slides goes a bit too fast, how to configure that? I was unable to find a solution to that the only thing Ive found was behavior: ‘smooth’ property.

    Thanks in advance for your answer.

    Best regards. Rafał.

    1. Hey, thank you!
      I know the problem, but I have no solution for that. There is a way to do that in JavaScript, but this is not working with Vue.
      If I found a solution, I’ll publish it in this article!

      1. Thank you for your anwer! I’ll try to fix. Hopefully i can find solution to that. I most definitely let you know 🙂

        Got one more question again, is there any way to stop scroll after last slide? So it won’t go up again?

        Best regards. Rafał.

        1. Yes, of course. You can change the moveUp() and moveDown() function. Just change the if-statements. They are just there to check if you are at the last slide. 🙂

  4. HEy, nice tutorial, but I have found some issue with it, it does not work always with hook created, if it is inside external component, so use hook mounted to fix it, but still, if user refresh page which is on e.g green section, page will be rendered again on old position, but it wont recognize this, and it think it is on first instead of 4 section ;/

  5. Guten Tag

    Erstmal finde ich dieses Tutorial grossartig! Hut ab!

    Nun, ich wollte den pagescroll eigentlich gerade in meine Vue.js App implementieren, aber aus irgendeinem Grund hatte ich Probleme (nutze den vue cli, vielleicht liegt es an dem).

    Hast du den Code schon einmal mit vue.js cli probiert?

    Beste Grüsse


    1. Hi,
      danke dir!
      Ich habe es über die CLI noch nicht probiert, aber der Code muss dort auch funktionieren, hier sind keine Besonderheiten eingebaut, die dort nicht funktionieren sollten.
      Was für ein Fehler wurde denn angezeigt bzw. was funktioniert nicht richtig?

      Viele Grüße

Your email address will not be published. Required fields are marked *