Blog Post

HTML5 - Scroll Into View e Hidden

Sign in to queue

Description

SCROLL IN TO VIEW E HIDDEN

Scrolling into view

Um truque simples, mas muito útil. Você pode fazer:

  document.getElementById('aviso').scrollIntoView()

Isso vai rolar a página até que o elemento com o id "aviso" esteja visível no topo do viewport. Você pode passar um parâmetro opcional top:

  document.getElementById('aviso').scrollIntoView(false)

O valor default é true. Se você passar false, a rolagem vai deixar o objeto visível na base do viewport.

hidden

Ocultar e exibir elementos é uma das tarefas mais comuns em Javascript. Em HTML5 existe um atributo específico para isso, o atributo hidden. Ao inserí-lo em um elemento assim:

  <div hidden>Xi, se esconde!</div>

Ou assim:

  <div hidden="true">Xi, se esconde!</div>

The Discussion

  • User profile image
    Ademilson

    hummmmmm

  • User profile image
    Alexandre

    Ficou show

  • User profile image
    erikcordeiro

    Qual é a vantagem de se utilizar o atributo "hidden" do elemento no lugar de css (display: none ou visibility: hidden)?

  • User profile image
    Carlos Henrique

    Massa!!

  • User profile image
    Jonatas

    O scroll into é bastante interessante, mas o hidden de fato não vi utilidade...

  • User profile image
    Ronaldo

    Erikcordeiro e jonatas...:

    Ve você usar o atributo Display:none; ele não irá aparecer e não terá interação com o usuário.
    Se usar o visibility:hidden, o objeto ficará com o seu lugar guardado, mas não aparecendo, como por exemplo botar uma palavra dentro de um span em uma frase com o visibility:hidden a frase irá aparecer assim:
    "Lorem dolor sit amet", onde o espaço seria a palavra que esta com a classe.

    Já usando o atributo hidden o objeto será escondido, e não terá o lugar dele no meio da página e terá interação com o usuário...

    No caso, o método mais usual é no input no html4, com o type="hidden" no input, onde pode-se atribuir um valor para ser enviado junto as informações preenchidas pelo usuário.

    Acho que fui claro.

  • User profile image
    Thadeu Esteves

    tambem não vi utilidade o atributo hidden , hoje nós ja tem temos que usar data-sets , microdatas nas tags, agora mais um atributo pra aumentar mais ainda nosso codigo html..

    scrollintoview() show de bola..

  • User profile image
    alexsandro

    meu novo site vai ter em base o sistema de rolagem (document.getElementById) para cada pagina principal, show :)

  • User profile image
    Manoel Mota

    Ambas as funcionalidades são interessante. Só a prática com esses atributos irão realmente confirmar sua real funcionalidade e o quanto é melhor que os métodos já existentes.

Add Your 2 Cents