Scroll() - Fonction CSS

Schéma syntaxique de scroll().

Description de la fonction scroll().

scroll() intervient dans le domaine des animations pilotées par un défilement (Scroll Driven Animation). Elle permet de se dispenser des propriétés scroll-timeline-name, scroll-timeline-axis et de la propriété résumée scroll-timeline.

La fonction définit l'axe et l'élément container à considérer pour cette animation. Elle est utilisée avec la propriété animation-timeline sur l'élément animé.

Une animation pilotée par le défilement ressemble à ça : la position de l'aiguille est conditionnée par la position de la barre de défilement (cela ne fonctionne pas sur tous les navigateurs, en particulier sur Firefox  ).

 

Pour une présentation plus complète des animations pilotées par un défilement, reportez-vous à la page sur les animations pilotées par un défilement.

La valeur scroll() peut être utilisée avec les propriétés suivantes :

• animation-timeline : Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.

Syntaxes de la fonction scroll().

• animation-timeline: scroll(inline nearest);

  Avec cette syntaxe complète, scroll() définit l'axe et l'élément qui va piloter l'animation.

  L'axe peut prendre l'une des valeurs suivantes :

  • x : l'axe horizontal.
  • y : l'axe vertical.
  • inline : l'axe dans le sens des lignes. Dépendant du mode d'écriture.
  • block : l'axe dans le sens des blocs. Dépendant du mode d'écriture.

  L'autre paramètre définit l'élément qui va piloter l'animation. Cet élément doit proposer des barres de défilement (propriété overflow). Les valeurs autorisées sont :

  • root : la page.
  • nearest : le parent défilable le plus proche en remontant.
  • self : l'élément lui même.
  Utilisez l'ascenseur horizontal pour déclencher l'animation (la couleur de l'arrière-plan est de plus en plus rouge).
  animation-timeline:scroll(inline nearest)
• animation-timeline: scroll(block root);

  L'animation est déclenchée par le scrolling de la page.

  Faites défiler la page verticalement pour déclencher l'animation
  animation-timeline:scroll(block root)
• animation-timeline: scroll(inline self);

  C'est l'élément qui reçoit l'animation qui est en même temps le cadre défilant.

  Utilisez l'ascenseur pour démarrer l'animation
  animation-timeline:scroll(inline self)

Simulateur avec la fonction scroll()

Pour ce simulateur, l'animation consiste à faire évoluer l'épaisseur du contour de l'élément (outline).

Ne fonctionne pas sur Firefox  , à moins d'une mise à jour.

Support de la fonction scroll().

Sur Firefox   toutes les fonctionnalités relatives aux animations pilotées par un défilement sont désactivées par défaut. Il est néanmoins possible de les activer en positionnant le flag layout.css.scroll-driven-animations.enabled à true (accéder aux flags sur Firefox).

Remarques :

(1) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.scroll-driven-animations.enabled à true.

1

Fonction
scroll()

Estimation de la prise en charge globale.

74%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

1

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction scroll().

• Animations pilotées par un défilement - Niveau 1

  Première description de la fonction scroll() (animation pilotée par un défilement).
  

  25 Octobre 2022

  Document de travail.

  

  

  

Voir aussi, à propos des animations pilotées par un défilement.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété scroll() fait partie du module Scroll-driven Animations. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :