a rising mist
The Goodly Mist
A Workingblog for Rob Sherman
#books   #code   #d&d   #essay   #food   #games   #link   #music   #nature   #news   #notes   #poetry   #projects   #prose   #spoken   #tech   #travel   #videos   #visart

April 3, 2019

A handy little driblet of JQuery and CSS here: on a few of my websites, I have .scrollableelements with more information than can fit within a single browser height, but which need to scroll independently of the page’s main content. Often, just setting the overflow to scroll, and using the browser’s default scrollbar, will look clunky, and be unnecessary; so I’ve been trying to find a slightly neater way of showing both that the element is scrollable (or, that there is more information available that I do not want the user to miss) and to give some indication of where, in that screed, the user is currently located.

The method I’ve settled on is a little indicator just underneath the scroll – a #downarrow, for example – which shows that there is more to read, but which disappears when you reach the bottom of the element. This is easily done in JQuery by checking, every time the user scrolls that element, the current bottom edge of the element in pixels (scrollTop() + innerHeight) against the total scrollHeight of the element. The resulting CSS animation makes the disappearance a little smoother and plainer than an abrupt vanishing, which can often look like a bug. I found that, for some reason, just checking against the scrollHeight on its own didn’t work – I could never scroll the element all the way to its full, pixel-perfect bottom, and so the disappearance code never ran. Adding the – 5 seemed to solve this, meaning that the arrow disappears just before you reach the bottom of the scrollable area.

I have no idea if this performs well. I haven’t noticed any bottlenecks in the browser performance; I imagine because the code only runs when the element is scrolled. I also know that I’m inviting the Golden Invective of web development – the one that lashes against the removal of functionality the sake of for aesthetics – but I’ve yet to have anybody tell me that it’s awkward, or that they don’t understand it, or that they need to plot exactly where they are in their reading. By the same token, I wouldn’t recommend this method for lengthy passages of text.


//JQuery
$(document).ready(function() {
$(".scrollableelement").bind('scroll', function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight - 5) {
$('#downarrow').removeClass('visible').addClass('invisible');
} else {
$('#downarrow').removeClass('invisible').addClass('visible');
}
});
});


/* CSS */
.visible {
animation-name: fadein;
animation-duration: 0.3s;
opacity: 1;
}
.invisible {
animation-name: fadeout;
animation-duration: 0.3s;
opacity: 0;
pointer-events: none;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}