Uma das minhas irritações com elementos posicionados de forma fixa ou absoluta é o <body> rolagem enquanto o senhor rola o elemento posicionado. O senhor já tentou rolar uma caixa de diálogo e ver a página rolar em segundo plano? É uma experiência de usuário horrível, que beira o constrangedor. Que horror.


Então, qual é a melhor maneira de evitar que o <body> rolando em segundo plano? Passe adiante scroll eventos e preventDefault ou stopPropagation, isso não funcionará. A maneira mais fácil é usar um simples snippet de CSS:



body.noScroll { /* ...or body.dialogShowing */
  overflow: hidden;
}


Evitar o transbordamento em todo o <body> garante que a rolagem em elementos que não sejam o elemento fixo ou absoluto desejado não aconteça. É uma maneira fácil de congelar a página para um elemento de foco que passa pelo mouse.


Esse truque tem sido usado desde sempre – certifique-se de mantê-lo em sua caixa de ferramentas!

  • Entrevista com um desenvolvedor da Web do Pornhub
  • 39 Shirts &#8211; Deixando a Mozilla

    Em 2001, eu tinha acabado de me formar em uma escola de ensino médio de uma cidade pequena e estava indo para uma faculdade de uma cidade pequena. Encontrei-me no pitoresco laboratório de informática, onde os computadores de baixa qualidade apresentavam dois navegadores: Internet Explorer e Mozilla. Foi nesse laboratório que me apaixonei…

  • Crie uma apresentação de slides simples usando o MooTools, Parte III: Criando uma classe
  • Criar URLs do Digg usando PHP

    Recentemente, o Digg lançou um novo recurso que permite que os usuários criem URLs minúsculos do Digg, que mostram um banner do Digg na parte superior, permitindo fácil acesso para votar no artigo a partir da página. Embora eu adore visitar o Digg de vez em quando…