Indicating scrollable overflowing content - dark ui

Question

As one can't indicate that an overflowing container is scrollable with a (dark) shadow gradient at the bottom of the element, what are desirable options to do so?

We are looking for options without scrollbars, we are working with a compact dashboard-like touch interface and a scrollbar in the particular element would sit awkwardly near the centre of the screen.

I have considered placing a chevron at the bottom (and top when scrolled?) but this reduces space for actual content.

Edit: added image.

Interface in question:

Light theme shadow design pattern:

Answer 1

Adding a second scrollbar to the page is definitely not the best option, so it’s great that you’re exploring alternatives to solve this issue.

However, there seems to be a lack of context. When reading your question, I wonder why this section needs to be collapsible in the first place. If it contains important information, it’s better for the user to see it without an extra click.

Here are some alternative options to consider instead of a scrollable section:

1. Accordion. This seems similar to what you described with the chevron icon. Check out how this element is organized in the Figma UI kit—it’ll give you a good idea of how to handle overflow content.

2. Review the use case. Perhaps the section you’re referring to needs more space, and there’s no need to hide the information at all. Alternatively, if the info isn't critical, consider hiding it in a tooltip.