Tiny Library: Autoscroll.js

Autoscroll.js is a free and veeeeery simple alternative to paid libraries that handle auto-scrolling. At the time I made it, auto-scrolling was something highly sought after, and most libraries that could do this simple effect were paid or did not work properly. On top of that, the scroll-behavior CSS property was a new feature and had serious supportability problems. So, as any reasonable person would do, instead of waiting for the platform to mature, I wrote my own tiny library. That is the developer equivalent of building a chair because the store is closed.

Nowadays there are many other libraries that you can, and should, use if you want this kind of functionality or effect. I am not going to pretend that Autoscroll.js is the future of scrolling on the web. But if you just want to make a simple page or a small website, it can do the job. It is one file, one function, and one book in the library. Sometimes that is exactly the size of the problem.

You give it the id of a container and the selector of the sections inside that container. It locks the scroll for a moment and then moves to the next section, so the page transitions like a presentation instead of a loose pile of divs. The delay parameter is the scroll lock: how long the user has to wait before the next scroll is accepted.

The usage is a piece of cake:

import autoScroll from "./autoScroll.es6.js";
 
const parentContainer = "wrapper";
const sectionArray = ".section";
const delay = 1200; # in ms
 
autoScroll(parentContainer, sectionArray, delay);

The HTML just needs a container that holds everything and the sections inside it. Do not use the body element as the container. The library keeps the credits in the source, and it is free for commercial use (good luck).

I made this script because the ones I found on the internet either were paid or did not work. I remember spending an afternoon testing libraries that promised the world but were all disappointing; there was even one that was paid, but I do not remember its name. At some point I closed ten tabs, opened a blank file and thought: "how hard can it be?" And the answer, as always, was "harder than it looks." Dealing with scroll is always a pain.

If you want to use it as an import, you will probably need to run it inside a server because of the CORS policy. It is explained in the README: you need to use it inside a server, a live server for example, because of the CORS policy. So no double-clicking the HTML file and wondering why the universe hates you. Spin up a local server, open the page, and the sections will scroll.

The repository is here: DrayanInterfaceDesigner/autoscroll. There is a README.txt, a LEIA-ME.txt, an example folder and the ES6 source. It is a tiny library, so the documentation is proportional.

If you need a full-featured scroll system with accessibility, virtualization, sticky headers and a plugin ecosystem, please use one of the big libraries. Seriously. They exist for a reason, and that reason is that scroll is a bottomless pit of edge cases. But if you are making a small page, a portfolio, a presentation-like landing page, and you want the simplest possible autoscroll, Autoscroll.js is here.