Posicionamiento absoluto negativo, barra de desplazamiento Extracción

Question

Estoy trabajando en este sitio: http://waterwing.waterwing.ca/

La animación de la esquina superior derecha es perfecto, excepto que crea una barra de desplazamiento horizontal con la forma en que está colocado.

Está posicionada absolutamente de primera -120px y derecha. Me pregunto cómo puedo hacer para que no se extenderá el cuerpo y limitaré a ocultarse una vez que golpea el borde de la página, de modo que no hay una barra de desplazamiento.

La barra de desplazamiento parece no estar allí en Windows Firefox, pero está ahí en Mac Firefox y Safari.

Gracias, Wade

Answer 1

#corner envoltura en otro div y ponerlo a la dimensión ocupada por el punto final de la animación, así como la posición absoluta. establecer el desbordamiento en este div a escondidas que evitar que el sangrado de la página y la activación del desplazamiento.

Answer 2

También se puede simplemente poner overflow: hidden en el cuerpo, que funciona de la misma manera y le ahorra un div

Answer 3

Dependiendo de su situación, pero se puede obtener barras de desplazamiento para un div, o para toda la página. Cuando se construye un diseño de página web de respuesta, siempre escribo este CSS:

body {
    overflow-x: hidden;
}

Y esto evita que aparecen barras de desplazamiento, a través del navegador y multi-dispositivo.