Smooth Full-Page Scrolling with ViewScroller.js

By Jake Rocheleau. in UI/UX. Updated on April 6, 2023.

JavaScript scroll effects have been around for years with dozens of great libraries to pick from. But a new contender in the field is viewScroller.js.

This very small yet powerful library can build single-page layouts that scroll as blocks with one swipe of the scroll wheel (or touchpad). This creates a controlled layout where scrolls move the user through individual sections of a page with pixel-tight precision.

Naturally, this is a completely free library available on GitHub and easy to install with Bower or npm.

However, viewScroller.js is not an independent JavaScript library. It does rely on jQuery and two specific plugins: jQuery Mousewheel and jQuery Easing. These are both required to get the scroll effects working properly.

This can hamper the value of viewScroller since it requires a few JS libraries just to function. But if you’re already using jQuery anyway, then it’s a no-brainer. viewScroller.js offers the simplest method to get a single page scrolling web app running without much code.

It does, however, use very detailed classes and IDs to create the scrolling effect. You can edit these classes in your own CSS file or overwrite them in the base code. You’ll find a full list on the repo page with class names and default setup data.

The simplest way to start is by cloning the viewScroller demos. They have one with a right sidebar, another with a left sidebar, and one with two sidebars sandwiching content in the middle.

If you’re okay with a jQuery-fueled web app then viewScroller is a fantastic free library to use. It does need quite a few dependencies but they shouldn’t be hard to configure.

Take a peek at the live demo and see what you think. If you like the UX and the scroll behavior then follow the setup guide on GitHub to get started.