Qual é a melhor maneira de indicar que você pode rolar em uma área quando a área não possui uma barra de rolagem?

A única coisa que eu conseguia pensar era em dizer: "Role para ver o menu completo" acima. Quais são algumas outras maneiras pelas quais as pessoas estão fazendo isso?

As pessoas se relacionam bem com a relatividade física nas interfaces do usuário. Em outras palavras, se você deseja que uma interface pareça natural ou torne seus controles óbvios, use a aparência de realismo físico para fazê-lo. Ícones adequados também são sempre obrigatórios, para uma funcionalidade óbvia.

Como seria uma área de rolagem fisicamente? Simples! Uma camada de conteúdo abaixo de um quadro externo. Para obter essa aparência, você pode usar uma sombra de caixa na camada externa.

• Dica: Ao criar sombras de caixa CSS, você pode juntar várias sombras com vírgulas. Use uma sombra clara distante com uma curta mais forte para obter um efeito agradável. Use RGBA (controle de opacidade) para dar um toque leve!

Em seguida, sem uma barra de rolagem, a melhor prática que você vem à mente seria usar o JQuery com uma caixa de rolagem clicável anexada às bordas dos quadros que possuem conteúdo que rola a rolagem, fazendo com que a caixa apareça quando elementos internos se projetarem fora da caixa em qualquer uma das quatro direções.

Se você deseja que a barra esteja ausente ou oculta por padrão, mantenha-a oculta ou levemente opaca até que a área de rolagem seja pairada ou tocada e depois faça aparecer o mecanismo de rolagem.

• Uso fácil: a caixa deve ser ativada (começar a rolar o elemento filho) levemente no evento pairar e totalmente com o mouse para baixo.

Aqui está uma demonstração:

Para áreas de rolagem longa, a rolagem acelerada é essencial nessa prática; caso contrário, a capacidade do usuário de navegar rapidamente pelo conteúdo será inibida.

Depois de brincar com isso, acho que posso criar um plug-in para o JQuery e usar essa prática no meu próximo aplicativo da web.

Certifique-se de que a quantidade padrão de conteúdo exibido primeiro mostre um item na parte inferior (supondo rolagem vertical) que seja apenas parcialmente revelada, informando assim ao usuário que há mais abaixo e que eles podem alcançá-lo / revelá-lo.

Aqui está o que eu tentaria:

Um gradiente suave que percorre um pouco do conteúdo. Isso indica que há mais abaixo. Além disso, é claro que você pode adicionar uma pequena seta.

Quão óbvio você deseja tornar se resume a quem você acha que o público será e qual é o contexto.

Técnicas comuns de localização de caminhos, como flechas e gráficos que continuam além da dobra, podem ajudar a jornada do usuário. Como alternativa, você pode optar por um menu / sistema de navegação ancorado, usado por muitos sites de página única.

A solução mais flagrante e feia seria um pop-up que informa aos usuários a rolar para baixo para obter mais conteúdo e depois oculta quando o ator rola (estilo de notificação de cookie).

Outra opção é alterar o cursor ao passar o mouse sobre o elemento para algo que indique rolagem, como uma seta em movimento que aponta e indica para baixo ou algo que indica 'leia mais rolando'.

Claro que isso só funciona para desktop.