Como adicionar uma barra de rolagem fixa a um website com CSS

Escrito por brandy alexander | Traduzido por luigi bahia
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como adicionar uma barra de rolagem fixa a um website com CSS
Aprenda o código para fixar a barra de rolagem ao seu website (Ciaran Griffin/Stockbyte/Getty Images)

A caixa de texto em seu site contém uma barra de rolagem na parte inferior ou lateral, que ajuda os visitantes ver todas as informações dentro da página. Tal como acontece com outros elementos da página, essa barra de rolagem desaparece de vista quando o visitante move a página da Web para cima ou para baixo em uma janela do navegador. Você pode fazer este elemento se manter visível usando Cascading Style Sheets, ou CSS. Use um software editor de texto do seu computador para adicionar o código CSS que criará uma barra de rolagem fixa na página.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

Instruções

    Procedimento

  1. 1

    Abra seu programa de edição de texto e o documento no qual você deseja inserir a barra de rolagem.

  2. 2

    Digite o seguinte código CSS antes do comando "</head>":

    <style type="text/css"> div#fixed { } </style>

    O comando "div#fixed" gerencia a barra de rolagem no texto.

  3. 3

    Digite "position: fixed;" entre os colchetes para especificar que você não quer a caixa de texto desaparecendo quando você rolar a página para cima ou para baixo. Também insira as opções "overflow: scroll;" para indicar que você deseja que a barra de rolagem apareça com a sua caixa de texto, assim como no exemplo abaixo:

    div#fixed { position: fixed; overflow: scroll; }

  4. 4

    Digite "height:;" e "width:", e insira valores numéricos em pixels para definir as dimensões da sua caixa de rolagem. Seu código CSS agora se parece com isto:

    <style type="text/css"> div#fixed { position: fixed; overflow: scroll; height: 150px; width: 300px; } </style>

  5. 5

    Digite "<div id="fixed"> </ div>" na área na página onde você deseja que sua caixa apareça. Digite o conteúdo que exibe dentro da sua caixa entre as tags div, desta maneira:

    <div id="fixed"> <p>Este é o conteúdo de sua caixa de texto.</p> </div>

  6. 6

    Salve o arquivo, visualizando sua página no navegador para conferir se o código funcionou corretamente.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível