The only thing I could think of was saying: "Scroll to see full menu" above. What are some other ways people are doing it?

  • 3
    Arrows? Context would matter a great deal. Can you post a sample?
    – Scott
    May 12, 2014 at 21:04
  • 2
    Why do you need that? There are no scrollbars on mobile and OSX, people aren't confused.
    – bjb568
    May 12, 2014 at 21:10
  • 2
    It is a problem someone else caused that we cannot fix, so we have to work around it.
    – Morgan
    May 12, 2014 at 21:12
  • @bjb568: I've used a few apps where I didn't realize I could scroll in a specific direction. If the screen cuts off part of what I can see in one direction or another it's clear, but sometimes things line up with the screen borders just right, and users don't realize they can/must scroll. Took me a while to realize I can scroll sideways on the new Facebook app for instance. May 13, 2014 at 0:00
  • @MooingDuck Facebook doesn't count, it's crap :P But yeah, you do have to stuff like what Confused said.
    – bjb568
    May 13, 2014 at 0:38

5 Answers 5


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:

enter image description here

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.


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.

  • Windows (/Phone) 8 seems to do this horizontally pretty often - when a title takes up more than the available horizontal space, it encourages you to swipe left/right to see more options.
    – Katana314
    May 13, 2014 at 1:26
  • 1
    Possibly with a slight fade-out/opacity gradient at the bottom to indicate that there's more.
    – wchargin
    May 13, 2014 at 2:02

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.

enter image description here

  • Thanks - i did check the other answers to make sure i did not repeat.
    – benteh
    May 13, 2014 at 22:00

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).


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.