Example scroll reporters used during illustration development

The build system I developed over the summer is designed to inject illustration content into a preexisting container embedded on a website (like this one). This allows me to develop the illustrations in a way that makes sure that they function properly within whatever content management system/blogging platform I use to share them.

The green bordered container is an example of the type of container I typically start with when developing an illustration. The container is a fixed height. The width changes to fill the space available.

Within that container, I use javascript to create listeners to track the side of the container and its position relative to the browser viewport. I can then use these listeners to trigger events in the window based on specific scroll positions - called action trigger below.

The action trigger value at the top right shows how far down the into the container the user has scrolled. That value can be used to trigger multiple events as the window is scrolled. In this example the light blue box of text that says "This will change color at 250" transitions from light blue to a blue/green color when the action trigger value hits 250 - meaning the user has scrolled 250 pixels into the container. The action trigger value starts at 0 when the top of the container is at the top of the browser window. No actions are triggered while the site header region is still in view.

The text in the center provides information about the edges of the container because it is useful to be able to tell when the top or bottom of the container is in view.

This is a simple example, but the logic working here is the basis of much of what I hope to post to the site over the next few months.

If the footer area of the site is tall enough to allow the content to scroll off the screen to the top, the action trigger reporter and the information about the visibility of the top and bottom of the container scrolls out of view with the container. This is not an issue on large desktop screens but, is an important consideration for small screens held in landscape view, and on sites with tall footer areas containing comment section, ads, and other information.