bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
How to Indicate Content Overflow with React Scrollfade
At bene : studio we love knowledge sharing to help the community of professionals. With 10+ years and over 100 projects behind us, we have a vast amount of experience. This is why we have launched a knowledge base on our blog with regular updates of tutorials, best practices, and open source solutions.
These materials come from our internal workshops with our team of developers and engineers.
When a simple scrollbar is not enough
In one of our React applications we have created small widgets for displaying data for the user to interact with. This data would be most often in the form of a list, and given the small sizes of the widgets it would easily overflow. The most commonly used indication of overflow content is to simply cut the content and add a scrollbar. This usually works well when there are clear situations, such as continuous flowing text or large headings, possibly images. In the case of lists, it can often happen that the content fits right into the frame. That’s why our designers requested an additional fade for indicating runaway content.
To me this seemed like a commonly used design element, so I started searching for an existing solution. Lo and behold there was none. Or at least not for this exact problem.
Then react-scrollfade was born
A component that dynamically fades out the bottom of an HTML element based on the scrollbar’s position.
Because this design element is used all over our application, a main goal was to provide this functionality with as little configuration as possible. As you can see it needs none! Just include it in the right place.
To see how this is accomplished let’s take a look inside.
What to fade
The component determines the element to fade by its position in the DOM tree. It applies the CSS mask and attaches a scroll event listener to its direct parent.
It uses linear-gradients as CSS masks making the bottom of the element transparent. Effectively the color of the fade is determined by what is under the element.
Other attributes like the exact height of the fade and the way the fade disappears, are very opinionated.
The height is set to 56 pixels because that’s how our designer imagined it, and it works for now.
The opacity is calculated with a simple ease-in function, where x = scrollbar’s position / scrolled element height.
The fading also fades out the scrollbar. For now, we got around it by using simple-bar to render a custom scrollbar. This is something we would like to improve in the future.
Plans for the future
As mentioned above, the component takes no configurations and is very opinionated. In the future plans are to include an interface for:
- adjustable width and height
- adjustable color
- customizable ease-in function for determining the amount of fading
- left, right, and top fade
You can find the source code on our Github.
We invite everyone to leave feedback in the form of an issue or contribute by creating a pull request.
Our designer Aliz and engineers Attila, Amr, Levente contributed to this article.
Did you like this? Join us!
Want to ask some questions? Share them with us via e-mail to firstname.lastname@example.org and we can set up a talk with our engineers.
Fancy working for the studio where you can work on international projects and write articles like this? Check out our open positions!
Looking for a partner for your next project? Check out our services page to see what we do and let’s set up a free consultation.
Read moreSee all open source
Internationalize your React App with React Intl
What is internationalization (i18n), and why is it important? Learn how to extract messages and generate auto-id.
Is well-formatted code important today?
A set of rules of what make a code beautiful and understandable to other developers.
Let bene : studio enhance
your digital product!