A Succinct, CSS-Only Overflow Scroll Indicator
04 May 2020So, you’ve set an element to overflow: scroll with an explicit height. Now you have a scrollable space. Depending on the content in this space, it may not be entirely obvious that it is scrollable, unless the content happens to be obviously cut off. Here’s an example.
Note: This does not apply on Windows or other operating systems (or browsers) that usually default to showing scroll bars for every scrollable element on the web.
The are all sorts of solutions to this on the web, but I didn’t want any surrounding HTML elements and more CSS to make them work. Here’s a quick CSS solution.
The scrollable div above has the following CSS applied to it.
div {
height: 150px; /* relevant */
margin: 35px;
font-size: 20px;
line-height: 25px;
overflow: scroll; /* relevant */
}First, put the content into its own nested element. For this example, I put it in a <p>. Now, the overflow is applied to the parent of this element and we can style each separately.
Now add some padding and a border to the contained element.
p {
padding: 10px;
border: 2px solid gray;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut eu sem integer vitae. Amet cursus sit amet dictum sit amet justo donec enim. Non consectetur a erat nam. Ut venenatis tellus in metus. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. At urna condimentum mattis pellentesque id. Natoque penatibus et magnis dis parturient. Dolor sed viverra ipsum nunc aliquet bibendum. Dapibus ultrices in iaculis nunc sed. Sed blandit libero volutpat sed cras ornare arcu. Vitae et leo duis ut.
The presence of borders on three sides implies the existence of a fourth. With it missing, it’s a clear indication that the element is scrollable.
To be a touch more minimalist, you could remove the left and right borders and the padding. But that depends on your design language and whether you can afford to lose the little bit of clarity.
p {
border-top: 2px solid gray;
border-bottom: 2px solid gray;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed velit dignissim sodales ut eu sem integer vitae. Amet cursus sit amet dictum sit amet justo donec enim. Non consectetur a erat nam. Ut venenatis tellus in metus. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. At urna condimentum mattis pellentesque id. Natoque penatibus et magnis dis parturient. Dolor sed viverra ipsum nunc aliquet bibendum. Dapibus ultrices in iaculis nunc sed. Sed blandit libero volutpat sed cras ornare arcu. Vitae et leo duis ut.
The solution may not fit all design languages. I do think the design is utilitarian enough that it shouldn’t be hard to massage it into yours. But then this post is equal parts science and art - I’m prescribing a design solution to a design problem here.
