La overscroll-behaviorpropiedad en CSS controla si un elemento utilizará "encadenamiento de desplazamiento" o no. Es probable que haya experimentado este comportamiento antes y quizás haya dado por sentado que el desplazamiento funciona así en la web. Si está dentro de un elemento que tiene su propio desplazamiento (digamos que es vertical) y se ha desplazado hacia abajo hasta la parte inferior, entonces, de forma predeterminada, el siguiente elemento principal hacia arriba (tal vez la página en sí) comienza a desplazarse en esa dirección. Si no desea ese valor predeterminado, overscroll-behaviores lo que lo controla.
.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )Vea el
comportamiento de desplazamiento excesivo del lápiz por Chris Coyier (@chriscoyier)
en CodePen.
La propiedad en cascada (es decir, se hereda), por lo que si no le gusta que ningún elemento lo haga, puede aplicarlo al cuerpo para evitar que suceda en cualquier lugar:
body ( overscroll-behavior: contain; /* or "none" */ )Se nonesupone que el valor detiene la capacidad de desplazamiento excesivo , lo que en mi opinión significa que cosas como las bandas de goma que hacen algunos navegadores, en particular los dispositivos con desplazamiento del panel táctil.
El valor predeterminado es auto.
Recursos
- Módulo de comportamiento de desplazamiento superior de CSS, nivel 1
- Noticias de la plataforma web
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| sesenta y cinco | 59 | 11 | 79 | No |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | No |
- filtro de fondo
- visibilidad trasera
- antecedentes
- adjunto de fondo
- modo de mezcla de fondo
- clip de fondo
- color de fondo
- imagen de fondo
- origen de fondo
- posición de fondo
- repetición de fondo
- tamaño de fondo
- sangrar
- desbordamiento de bloque
- frontera
- frontera-límite
- colapso de la frontera
- imagen de borde
- radio de borde
- espaciado de bordes
- fondo
- caja-decoracion-descanso
- sombra de la caja
- tamaño de caja
- irrumpir
- lado de la leyenda
- signo de intercalación
- color de intercalación
- forma de intercalación
- claro
- ruta del clip
- color
- ajuste de color
- recuento de columnas
- relleno de columna
- espacio entre columnas
- regla de columna
- color-regla-columna
- estilo de regla de columna
- ancho de regla de columna
- intervalo de columnas
- ancho de columna
- columnas
- Contiene
- contenido
- contraincremento
- contador de reinicio
- contador
- cursor
- dirección
- mostrar
- celdas vacías
- llenar
- filtrar
- flexionar
- base flexible
- dirección flexible
- flujo flexible
- crecimiento flexible
- flexión-encogimiento
- envoltura flexible
- flotador
- fuente
- fuente-pantalla
- Familia tipográfica
- configuración de la función de fuente
- kerning de fuentes
- tamaño-óptico-de-fuente
- tamaño de fuente
- ajuste de tamaño de fuente
- font-stretch
- Estilo de fuente
- síntesis de fuentes
- variante de fuente
- fuente-variante-numérica
- peso de la fuente
- brecha
- rejilla-fila / rejilla-columna
- cuadrícula-plantilla-columnas / cuadrícula-plantilla-filas
- puntuación-colgante
- altura
- guiones
- renderizado de imágenes
- letra inicial
- tamaño en línea
- recuadro
- bloque de inserción
- inserto-bloque-final
- inicio de bloque de inserción
- inserto en línea
- insert-inline-end
- inset-inline-start
- aislamiento
- justificar el contenido
- justificar-elementos
- izquierda
- espaciado de letras
- salto de línea
- abrazadera de línea
- altura de la línea
- estilo de lista
- margen
- bloque de margen
- margen-bloque-fin
- margen-bloque-inicio
- margen en línea
- margen-en-línea-fin
- margen-inicio-en-línea
- clip de máscara
- máscara-imagen
- modo máscara
- máscara-origen
- posición de la máscara
- máscara-repetir
- tamaño de la máscara
- Altura máxima
- tamaño máximo en línea
- anchura máxima
- altura mínima
- ancho mínimo
- modo de mezcla de mezcla
- objeto de ajuste
- posición del objeto
- ancla de desplazamiento
- distancia de desplazamiento
- ruta de desvío
- offset-rotar
- opacidad
- orden
- huérfanos
- contorno
- desplazamiento de contorno
- Desbordamiento
- ancla de desbordamiento
- envoltura de desbordamiento
- comportamiento de desplazamiento excesivo
- relleno
- salto de página
- orden de pintura
- perspectiva
- perspectiva-origen
- elementos de lugar
- puntero-eventos
- posición
- citas
- cambiar el tamaño
- derecho
- espacio entre filas
- comportamiento de desplazamiento
- margen de desplazamiento
- relleno de desplazamiento
- scroll-snap-align
- scroll-snap-stop
- tipo scroll-snap
- barra de desplazamiento
- color de la barra de desplazamiento
- barra de desplazamiento-canalón
- ancho de barra de desplazamiento
- forma-imagen-umbral
- margen de forma
- forma-exterior
- hablar
- golpe
- trazo-dasharray
- desplazamiento del trazo
- trazo-linecap
- línea de trazo
- anchura del trazo
- tamaño de pestaña
- diseño de mesa
- texto alineado
- text-align-last
- texto-combinar-vertical
- decoración de texto
- color-decoracion-texto
- linea-decoracion-de-texto
- Saltar decoración de texto
- texto-decoración-saltar-tinta
- estilo de decoración de texto
- grosor de decoración de texto
- guion de texto
- justificar texto
- orientación del texto
- desbordamiento de texto
- renderizado de texto
- sombra de texto
- trazo de texto
- transformación de texto
- desplazamiento de subrayado de texto
- posición-subrayado-texto
- arriba / abajo / izquierda / derecha
- acción táctil
- transformar
- origen de transformación
- estilo de transformación
- transición
- retardo de transición
- duración de la transición
- propiedad de transición
- función de tiempo de transición
- unicode-bidi
- rango unicode
- selección de usuario
- alineación vertical
- visibilidad
- espacio en blanco
- viudas
- ancho
- cambiará
- descanso de palabras
- espaciado entre palabras
- modo de escritura
- índice z
- zoom
- A
- ::antes después
- :activo
- : cualquier enlace
- Hermano adyacente
- (atributo)
- B
- :blanco
- C
- :comprobado
- :Actual
- Niño
- Clase
- D
- :defecto
- : dir ()
- :discapacitado
- Descendiente
- mi
- :vacío
- :activado
- F
- ::primera letra
- ::primera linea
- :primer hijo
- : primero de tipo
- :atención
- : foco visible
- : enfoque dentro
- :futuro
- GRAMO
- Hermano general
- H
- :flotar
- I
- :en el rango
- :indeterminado
- :inválido
- :es()
- IDENTIFICACIÓN
- J
- K
- L
- : lang ()
- :último niño
- : último de tipo
- :Enlace
- METRO
- ::marcador
- :partidos()
- norte
- :no()
- : enésimo hijo
- : enésimo último hijo
- : enésimo último de tipo
- : enésimo de tipo
- O
- :hijo único
- : único de tipo
- :Opcional
- :fuera de rango
- PAG
- :: marcador de posición
- :pasado
- : marcador de posición mostrado
- Q
- R
- : lectura-escritura /: solo lectura
- :requerido
- :raíz
- S
- ::selección
- T
- :objetivo
- Escribe
- U
- : usuario inválido
- Universal
- V
- :válido
- :visitó
- W
- X
- Y
- Z
maestros frontend de Learning Partner
¿Necesita formación en desarrollo front-end?
Frontend Masters es el mejor lugar para conseguirlo. Tienen cursos sobre todas las tecnologías front-end más importantes, desde React hasta CSS, desde Vue hasta D3 y más allá con Node.js y Full Stack.