Vue.js Fullpage Scroll Component: Dynamic scrolling for your website

In this article, you’ll learn how to code a custom Vue.js Fullpage Scroll component for your Vue.js app and add dynamic scrolling to your website.

Fullpage Scroll means that you don’t scroll normally, but you are always scrolled directly from one section to the next, or to the previous section. That’s why I’ll show you a demo of the Vue.js Fullpage Scroll component first.

Pretty Vue.js fullpage demo

So that it is clear right from the start how the Vue.js Fullpage Scroll (or OnePage Scroll) will look like, I have prepared a demo here. This version is supported by all common modern browsers and also works on mobile devices.

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:

• Strategies
• PopHonic

Why not use a ready-made Vue.js fullpage scroll component?

You are very welcome to do that to save yourself work. The existing ones work great! However, it is much cooler to program the whole thing yourself, isn’t it? 😉 And also you don’t have so many functions on your site, which you often 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.

If you’re new to Vue.js, you can program these Vue.js examples to improve your skills!

Step 1: Create 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 -->
</div>

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>
<section class="fullpage">
    <h1>Section 2</h1>
</section>
<section class="fullpage">
    <h1>Section 3</h1>
</section>
<section class="fullpage">
    <h1>Section 4</h1>
</section>
<section class="fullpage">
    <h1>Section 5</h1>
</section>

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">
  <span
     class="menu-point"
     v-bind:class="{active: activeSection == index}"
     v-on:click="scrollToSection(index)"
     v-for="(offset, index) in offsets"
     v-bind:key="index"
     v-title="'Go to section ' + (index+1)">
  </span>
</div>

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:

Attribute	Value	Description
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.
v-title	‘Go to section ‘ + (index+1)	Sets a title when hovering with the number of the section.

Step 2: Style Sections (CSS)

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.

Navigation

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 .menu-point.active {
  opacity: 1;
  transform: scale(1.5);
}

.sections-menu .menu-point:hover {
  opacity: 1;
  transform: scale(1.2);
}

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.

Step 3: Programming functionalities in 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,
    inMoveDelay: 400,
    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;
        this.offsets.push(sectionOffset);
    }
}

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

mounted() {
    this.calculateSectionOffsets();
}

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 mounted() 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 destroyed() 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;

    document.getElementsByTagName('section')[id].scrollIntoView({
        behavior: 'smooth'
    });

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

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) {
        this.moveUp();
    } else if (e.wheelDelta > 30 && !this.inMove) {
        this.moveDown();
    }

    e.preventDefault();
    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;
    this.activeSection--;

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

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

    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) {
    e.preventDefault();

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

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

    if (this.touchStartY < currentY) {
        this.moveDown();
    } else {
        this.moveUp();
    }

    this.touchStartY = 0;
    return false;
}

Conclusion

As you can see, you can add your own features or remove parts if you don’t like them. A Vue.js Fullpage Scroll is a very chic feature and when used properly you can create very nice results.

Did you know that you can use Vue.js without build tools, etc.? No, then check out my article on using Vue without Node or CLI.