Maison > Article > interface Web > Implémentation CSS basée sur l'application de défilement utilisateur (code)
Implémentation CSS basée sur l'application de défilement utilisateur (code)
- 不言avant
- 2019-03-30 11:38:551823parcourir
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
<header>I'm the page header</header> <p>Lot's of content here...</p> <p>More beautiful content...</p> <p>Content...</p>
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;
});
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">
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);
}
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();
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();
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 });
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!