Barra de rolagem - scroll

Postado por em
A barra de rolagem ou scroll do inglês, server para fixar o texto na área determinada.

Escopo

pode ser aplicada das diretivas
  • pre
  • blockquote
  • div

Exemplos

Não é indicado o uso para bordas arredondadas.

pre

<pre style='overflow: auto; border:1px solid #000; color:#0f0; background-color:#000; padding:2em;'>
aW1wb3J0IG9zLCBzeXMKZnJvbSBzZXR1cHRvb2xzIGltcG9ydCBzZXR1cCwgQ29tbWFuZAoKZnJvbSBza2VsUGFja2FnZSBpbXBvcnQgX192ZXJzaW9uX18KCmRlZiBtYWluKCk6CiAgICBzZXR1cCgKICAgICAgIBuYW1lPSdza2VsUGFja2FnZScsCiAgICAgICAgZGVzY3JpcHRpb249J2Jhc2Ugc2tlbGwgcHJvamVjdCB0byBwYWNrYWdlIFB5dGhvbiBvbiBweXBpJywKICAgICAgICB1cmw9J2h0dHA6Ly93d3cuaW5jb2x1bWUY29tLmJyJywKICAgICAgICB2ZXJzaW9uPV9fdmVyc2lvbl9fLAogICAgICAgIGF1dGhvcj0nUmljYXJkbyBCcml0bycsCiAgICAgICAgYXV0aG9yX2VtYWlsPSdicml0byBhdCBpbmNvbHVtZS5jb20uYnInLAogIAgICAgIHB5X21vZHVsZXM9WyJza2VsUGFja2FnZSJdLAogICAgICAgIHppcF9zYWZlPUZhbHNlLAogICAgKQoKaWYgX19uYW1lX18gPT0gJ19fbWFpbl9fJzoKICAgIG1haW4oKQo=
</pre>

pre com sombra

<pre style='overflow: auto; border:1px solid #000; color:#0f0; background-color:#000; padding:2em; -webkit-box-shadow:10px 10px 5px #888; -moz-box-shadow:10px 10px 5px #888; box-shadow:10px 10px 5px #888;'>
aW1wb3J0IG9zLCBzeXMKZnJvbSBzZXR1cHRvb2xzIGltcG9ydCBzZXR1cCwgQ29tbWFuZAoKZnJvbSBza2VsUGFja2FnZSBpbXBvcnQgX192ZXJzaW9uX18KCmRlZiBtYWluKCk6CiAgICBzZXR1cCgKICAgICAgIBuYW1lPSdza2VsUGFja2FnZScsCiAgICAgICAgZGVzY3JpcHRpb249J2Jhc2Ugc2tlbGwgcHJvamVjdCB0byBwYWNrYWdlIFB5dGhvbiBvbiBweXBpJywKICAgICAgICB1cmw9J2h0dHA6Ly93d3cuaW5jb2x1bWUY29tLmJyJywKICAgICAgICB2ZXJzaW9uPV9fdmVyc2lvbl9fLAogICAgICAgIGF1dGhvcj0nUmljYXJkbyBCcml0bycsCiAgICAgICAgYXV0aG9yX2VtYWlsPSdicml0byBhdCBpbmNvbHVtZS5jb20uYnInLAogIAgICAgIHB5X21vZHVsZXM9WyJza2VsUGFja2FnZSJdLAogICAgICAgIHppcF9zYWZlPUZhbHNlLAogICAgKQoKaWYgX19uYW1lX18gPT0gJ19fbWFpbl9fJzoKICAgIG1haW4oKQo=
</pre>

blockquote

<blockquote style='overflow: scroll; border:1px solid #000; color:#0f0; background-color:#000; padding:2em;'> aW1wb3J0IG9zLCBzeXMKZnJvbSBzZXR1cHRvb2xzIGltcG9ydCBzZXR1cCwgQ29tbWFuZAoKZnJvbSBza2VsUGFja2FnZSBpbXBvcnQgX192ZXJzaW9uX18KCmRlZiBtYWluKCk6CiAgICBzZXR1cCgKICAgICAgIBuYW1lPSdza2VsUGFja2FnZScsCiAgICAgICAgZGVzY3JpcHRpb249J2Jhc2Ugc2tlbGwgcHJvamVjdCB0byBwYWNrYWdlIFB5dGhvbiBvbiBweXBpJywKICAgICAgICB1cmw9J2h0dHA6Ly93d3cuaW5jb2x1bWUY29tLmJyJywKICAgICAgICB2ZXJzaW9uPV9fdmVyc2lvbl9fLAogICAgICAgIGF1dGhvcj0nUmljYXJkbyBCcml0bycsCiAgICAgICAgYXV0aG9yX2VtYWlsPSdicml0byBhdCBpbmNvbHVtZS5jb20uYnInLAogIAgICAgIHB5X21vZHVsZXM9WyJza2VsUGFja2FnZSJdLAogICAgICAgIHppcF9zYWZlPUZhbHNlLAogICAgKQoKaWYgX19uYW1lX18gPT0gJ19fbWFpbl9fJzoKICAgIG1haW4oKQo= </blockquote>

blockquote com sombra

<blockquote style='overflow: auto; border:1px solid #000; color:#0f0; background-color:#000; padding:2em; -webkit-box-shadow:10px 10px 5px #888; -moz-box-shadow:10px 10px 5px #888; box-shadow:10px 10px 5px #888;'> aW1wb3J0IG9zLCBzeXMKZnJvbSBzZXR1cHRvb2xzIGltcG9ydCBzZXR1cCwgQ29tbWFuZAoKZnJvbSBza2VsUGFja2FnZSBpbXBvcnQgX192ZXJzaW9uX18KCmRlZiBtYWluKCk6CiAgICBzZXR1cCgKICAgICAgIBuYW1lPSdza2VsUGFja2FnZScsCiAgICAgICAgZGVzY3JpcHRpb249J2Jhc2Ugc2tlbGwgcHJvamVjdCB0byBwYWNrYWdlIFB5dGhvbiBvbiBweXBpJywKICAgICAgICB1cmw9J2h0dHA6Ly93d3cuaW5jb2x1bWUY29tLmJyJywKICAgICAgICB2ZXJzaW9uPV9fdmVyc2lvbl9fLAogICAgICAgIGF1dGhvcj0nUmljYXJkbyBCcml0bycsCiAgICAgICAgYXV0aG9yX2VtYWlsPSdicml0byBhdCBpbmNvbHVtZS5jb20uYnInLAogIAgICAgIHB5X21vZHVsZXM9WyJza2VsUGFja2FnZSJdLAogICAgICAgIHppcF9zYWZlPUZhbHNlLAogICAgKQoKaWYgX19uYW1lX18gPT0gJ19fbWFpbl9fJzoKICAgIG1haW4oKQo= </blockquote>

div

<div style='overflow: auto; border:1px solid #000; color:#0f0; background-color:#000; padding:2em;'> aW1wb3J0IG9zLCBzeXMKZnJvbSBzZXR1cHRvb2xzIGltcG9ydCBzZXR1cCwgQ29tbWFuZAoKZnJvbSBza2VsUGFja2FnZSBpbXBvcnQgX192ZXJzaW9uX18KCmRlZiBtYWluKCk6CiAgICBzZXR1cCgKICAgICAgIBuYW1lPSdza2VsUGFja2FnZScsCiAgICAgICAgZGVzY3JpcHRpb249J2Jhc2Ugc2tlbGwgcHJvamVjdCB0byBwYWNrYWdlIFB5dGhvbiBvbiBweXBpJywKICAgICAgICB1cmw9J2h0dHA6Ly93d3cuaW5jb2x1bWUY29tLmJyJywKICAgICAgICB2ZXJzaW9uPV9fdmVyc2lvbl9fLAogICAgICAgIGF1dGhvcj0nUmljYXJkbyBCcml0bycsCiAgICAgICAgYXV0aG9yX2VtYWlsPSdicml0byBhdCBpbmNvbHVtZS5jb20uYnInLAogIAgICAgIHB5X21vZHVsZXM9WyJza2VsUGFja2FnZSJdLAogICAgICAgIHppcF9zYWZlPUZhbHNlLAogICAgKQoKaWYgX19uYW1lX18gPT0gJ19fbWFpbl9fJzoKICAgIG1haW4oKQo= </div>

div com sombra

<div style='overflow: auto; border:1px solid #000; color:#0f0; background-color:#000; padding:2em; -webkit-box-shadow:10px 10px 5px #888; -moz-box-shadow:10px 10px 5px #888; box-shadow:10px 10px 5px #888;'> aW1wb3J0IG9zLCBzeXMKZnJvbSBzZXR1cHRvb2xzIGltcG9ydCBzZXR1cCwgQ29tbWFuZAoKZnJvbSBza2VsUGFja2FnZSBpbXBvcnQgX192ZXJzaW9uX18KCmRlZiBtYWluKCk6CiAgICBzZXR1cCgKICAgICAgIBuYW1lPSdza2VsUGFja2FnZScsCiAgICAgICAgZGVzY3JpcHRpb249J2Jhc2Ugc2tlbGwgcHJvamVjdCB0byBwYWNrYWdlIFB5dGhvbiBvbiBweXBpJywKICAgICAgICB1cmw9J2h0dHA6Ly93d3cuaW5jb2x1bWUY29tLmJyJywKICAgICAgICB2ZXJzaW9uPV9fdmVyc2lvbl9fLAogICAgICAgIGF1dGhvcj0nUmljYXJkbyBCcml0bycsCiAgICAgICAgYXV0aG9yX2VtYWlsPSdicml0byBhdCBpbmNvbHVtZS5jb20uYnInLAogIAgICAgIHB5X21vZHVsZXM9WyJza2VsUGFja2FnZSJdLAogICAgICAgIHppcF9zYWZlPUZhbHNlLAogICAgKQoKaWYgX19uYW1lX18gPT0gJ19fbWFpbl9fJzoKICAgIG1haW4oKQo= </div>

Comentários

Postar um comentário