Implémentation CSS basée sur l'application de défilement utilisateur (code)-tutoriel CSS-php.cn

Implémentation CSS basée sur l'application de défilement utilisateur (code)

不言

Libérer： 2019-03-30 11:38:55

avant

1849 Les gens l'ont consulté

Le contenu que cet article vous apporte concerne l'implémentation CSS des applications de défilement basées sur l'utilisateur (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

En mappant le décalage de défilement actuel sur une propriété d'un élément HTML, nous pouvons styliser les éléments de la page en fonction de la position de défilement actuelle. Nous pouvons l'utiliser pour créer un composant de navigation flottant.

C'est le HTML que nous utiliserons, le

un composant intéressant que nous voulons faire flotter au-dessus du contenu lorsque nous faisons défiler vers le bas.

<header>I'm the page header</header>
<p>Lot's of content here...</p>
<p>More beautiful content...</p>
<p>Content...</p>

Copier après la connexion

Tout d'abord, nous écouterons l'événement 'scroll', le document et scrollY et nous demanderons la position actuelle à chaque fois que l'utilisateur fait défiler.

document.addEventListener('scroll', () => {
  document.documentElement.dataset.scroll = window.scrollY;
});

Copier après la connexion

Nous stockons la position de défilement dans l'attribut data de l'élément html. Si vous utilisez les outils de développement pour afficher le DOM, cela ressemblera à ceci.

<html data-scroll="0">

Copier après la connexion

Nous pouvons désormais utiliser cet attribut pour styliser les éléments de la page.

/* Make sure the header is always at least 3em high */
header {
  min-height: 3em;
  width: 100%;
  background-color: #fff;
}

/* Reserve the same height at the top of the page as the header min-height */
html:not([data-scroll='0']) body {
  padding-top: 3em;
}

/* Switch to fixed positioning, and stick the header to the top of the page */
html:not([data-scroll='0']) header {
  position: fixed;
  top: 0;
  z-index: 1;

  /* This box-shadow will help sell the floating effect */
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}

Copier après la connexion

En gros, c'est tout, lors du défilement vers le bas, le titre se détachera désormais automatiquement de la page et flottera au-dessus du contenu. Le code JavaScript ne s'en soucie pas, son travail consiste à mettre le décalage de défilement dans l'attribut data. C'est une bonne chose car il n'y a pas de couplage étroit entre JavaScript et CSS.

Il y a encore quelques améliorations, principalement dans le domaine des performances.

Mais d'abord, nous devons corriger le script pour que la position de défilement ne soit pas en haut lors du chargement de la page. Dans ces cas, le titre ne s'affichera pas correctement.

Lorsque la page se charge, il faut rapidement obtenir le décalage de défilement actuel. Cela garantit que nous sommes toujours en phase avec la situation actuelle.

// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events
document.addEventListener('scroll', storeScroll);

// Update scroll position for first time
storeScroll();

Copier après la connexion

Nous examinerons ensuite quelques améliorations de performances. Si nous demandons cette position de défilement, le navigateur devra calculer la position de chaque élément de la page pour s'assurer qu'il renvoie la bonne position. Il serait préférable de ne pas le forcer à faire cela à chaque interaction de défilement.

Pour ce faire, nous avons besoin d'une méthode anti-rebond, qui mettra notre requête en file d'attente jusqu'à ce que le navigateur soit prêt à dessiner le cadre suivant, auquel cas il a calculé les positions de tous les éléments sur la page. Il a donc gagné ça ne se reproduira plus.

// The debounce function receives our function as a parameter
const debounce = (fn) => {

  // This holds the requestAnimationFrame reference, so we can cancel it if we wish
  let frame;

  // The debounce function returns a new function that can receive a variable number of arguments
  return (...params) => {
    
    // If the frame variable has been defined, clear it now, and queue for next frame
    if (frame) { 
      cancelAnimationFrame(frame);
    }

    // Queue our function call for the next frame
    frame = requestAnimationFrame(() => {
      
      // Call our function and pass any params we received
      fn(...params);
    });

  } 
};

// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll));

// Update scroll position for first time
storeScroll();

Copier après la connexion

En marquant passivement les événements, nous pouvons indiquer au navigateur que nos événements de défilement ne seront pas annulés par les interactions tactiles (comme lors de l'interaction avec des plugins tels que Google Maps). Cela permet au navigateur de faire défiler la page immédiatement car il sait désormais que l'événement ne sera pas annulé.

document.addEventListener('scroll', debounce(storeScroll), { passive: true });

Copier après la connexion

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo CSS du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!