What is the best way to indicate that you can scroll in an area when the area doesn’t have a scrollbar?

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.