Adding a scroll indicator

Scroll bars have been with us since the first GUI. They help us navigate content that is taller - or wider - than the window in which it is displayed. They come in various flavours, suitably modified as operating systems evolved, but invariably they consist of an arrow-shaped button at each end (top, bottom, left and right) and a ‘thumb’ that can be pulled along the vertical or horizontal slider-track. Mouse-clicking in the slider-track above or below the thumb moves the content up or down more than is the case by clicking the arrow buttons. All this makes the scrollbar a little design miracle.

That’s on a desktop or laptop where a mouse or a trackpad - or a mouse with a scroll wheel - is used. On tablets and smartphones with touchscreens, scrollbars have shrunk so that they occupy less screen space or have faded to an insubstantial pale grey. We swipe in these environments rather than scroll. Indeed, these touchscreen scrollbars are usually too small to interact with. The unintended consequence of this evolution is that it’s harder for the reader to judge how much of a page remains to be read.

The scroll indicator

Enter the scroll indicator, an unobtrusive visual indicator that tells you what percentage of the current page has been scrolled. When added to a website (or parts of it), it tells you how much further you have to scroll to reach the end of your browser’s current page. It is typically coded to sit inside the top of the browser’s window (as on this site), although it could equally sit at the bottom. As the user scrolls down the page, the coloured part of the indicator advances from left to right to reflect the user’s position on the page. The one on this website is red, but choose your own colour.

Finding scroll indicator code and wiring it up for the Backdrop CMS

You can find the code you will need on the W3Schools website. They have the HTML, the CSS and the JavaScript, and what follows are the basics for wiring this up in Backdrop CMS.

The JavaScript

Paste the JavaScript code from that page into your favourite editor.

// When the user scrolls the page, execute myFunction:
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

Save it as a JavaScript file in your Backdrop theme’s js folder. Then tell Backdrop that that script is to be used throughout the site by editing your theme’s .info file by adding the following line:

scripts[] = js/scroll_indicator.js

Make sure that you specify the name of the js file that you previously saved.

Inject the HTML markup where you want it using Backdrop’s blocks and layouts

Create a new block for your current layout. Name it something meaningful like Scroll indicator. Paste the HTML from the W3Schools example into the new block’s content field:

  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>

Save the new block then head to your layout page at admin/structure/layouts/manage/default/blocks. Add your new block to a suitable region for the page, TOP will suffice nicely if that’s appropriate for your layout. (You will specify its exact position with CSS in the next step.)

Positioning and styling the indicator with CSS

This is the fun bit where you define the appearance and location of the scroll indicator.

.progress-container {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 2px;
}
.progress-bar {
	height: 2px;
	background: red;
	width: 0%;
}

Specifying that the container has a fixed position (line 2) ensures that it is removed from the document’s flow and is stationed relative to the viewport. It will remain there when the page is scrolled. Locking it into the top-left corner (lines 3 and 4) and allowing it to extend the full width of the window (line 6) clearly makes sense. A minimal height of just 2 pixels (lines 7 and 10) will steal a negligible amount of screen real estate. Giving the moving progress bar a red colour (line 10) satisfies my need to deploy a visual pun about how much of a page has been ‘read’. Your implementation can nod in a different direction.

This implementation can be confounded when there are adjacent blocks of links that extend well below shorter blocks of main content. Because the scroll indicator will include those adjacent blocks in its calculation it will give a false reading of how much of the main content is still to be read. Small beer for short content as the scroll indicator will come into its own for longer content.

I also don’t favour displaying this on home pages or other pages of what are likely to be links to other content. It’s ideal for long-read pages. In Backdrop, you can deal with that by tweaking the visibility conditions of the block into which you placed the HTML above. Use the URL path visibility condition to specify which paths should be excluded or included from showing the block.