Sempre role um elemento div e não a própria página
Tenho um layout de página com um<div id="content">
elemento que contém as coisas importantes na página. A parte importante sobre o design é:
#content {
height: 300px;
width: 500px;
overflow: scroll;
}
Agora, quando o texto contido for maior que 300 px, preciso ser capaz de rolar o texto. É possível rolar o<div>
, mesmo quando o mouse não está pairando o elemento (as teclas de seta também devem funcionar
Observe que não quero desativar a rolagem 'global': deve haver duas barras de rolagem na página, a barra de rolagem global e a barra de rolagem<div>
.
A única coisa que muda é que o interior<div>
sempre deve rolar, a menos que não possa mais ser movido (nesse caso, a página deve começar a rolar).
Isso é possível de alguma form
Edita
Acho que o problema foi um pouco confuso, então anexarei uma sequência de como gostaria que ele funcionasse. (A Khez já forneceu uma prova de conceito.)
A primeira imagem é a aparência da página quando abert
Agora, o mouse fica na posição indicada e rola e o que deve acontecer é que
Primeiro div interno rola seu conteúdo (Fig. 2) A div interna terminou a rolagem (Fig. 3)O elemento body rola para que o próprio div seja movido. (Fig. 4)Espero que seja um pouco mais claro agor
(Imagem agradecida a gomockingbird.com)