: What is the best way to indicate that you can scroll in an area when the area doesn't have a scrollbar? The only thing I could think of was saying: "Scroll to see full menu" above. What

@Harper654

Here is what I would try:

A soft gradient that goes over a little of the content. This indicates that there are more below. In addition, you can of course add a little arrow.

Vote Up Vote Down

@Shakeerah625

People relate well to physical relativity in user interfaces. In other words, if you want an interface to feel natural, or make its controls obvious, you can use the appearance of physical realism to do it. Proper icons are always a must-do as well, for obvious functionality.



How would a scroll area look physically? Simple! A layer of content below an outer frame. To achieve that look, you might use a box shadow on the outer layer.


Tip: When creating CSS box-shadows, you can put multiple shadows together with commas. Use a light far shadow with a stronger short one for a nice effect. Use RGBA (opacity-control) for a light touch!




Next, without a scroll bar, the best practice that comes to mind would be to use JQuery with a clickable scroll box attached to the edges of frames who have content that scroll, having the box show up when inner elements protrude outside of the box in any of the four directions.

If you want the bar to be absent or hidden by default, keep it either hidden or lightly opaque until the scroll area is hovered over or tapped, and then have the scroll mechanism appear.


Easy Use: The box should activate (begin scrolling the child element) lightly on hover event, and fully on a mouse-down.


Here's a demonstration:



For long scroll areas, accelerated scrolling is a must via this practice, otherwise the users ability to navigate the content quickly will be inhibited.



After fiddling with this, I think I may create a JQuery plugin for, and use this practice for my next web app.

Vote Up Vote Down

@Moriarity648

Another option is to change the cursor when hovering over the element to something that indicates scroll, such as a moving arrow that points and indicates downwards, or something that indicates 'read more by scrolling'.

Of course this only works for desktop.

Vote Up Vote Down

@Hamaas979

How obvious you want to make it will come down to who you think the audience will be and what the context is.

Usual way-finding techniques such as arrows and graphics that continue beyond the fold can help the user journey. Alternatively, you could go for an anchored menu/nav system, which many single page sites use.

The most blatant and ugly solution would be a popup which informs users to scroll down for more content, then hides when the actor scrolls (cookie notification style).

Vote Up Vote Down

@Turnbaugh909

Make sure that the default amount of content first displayed shows an item at the bottom (assuming vertical scrolling) that's only partially revealed, thereby informing the user there's more below, and they can reach/reveal it.

Vote Up Vote Down