Ombes de défilement avec javascript

Les ombres de défilement sont une bonne conception d'expérience utilisateur, et une petite ombre intérieure ne sera affichée que lorsqu'un élément peut faire défiler. Étonnamment, cela peut être réalisé avec CSS et est un exemple de compétences CSS. Cependant… cela ne fonctionne pas sur iOS Safari. Il fonctionnait, mais il a échoué dans iOS 13 et certaines autres fonctionnalités CSS utiles, sans explication pour pourquoi, et n'a pas été corrigée , mais il a maintenant été corrigé au moins en juillet 2022 (grâce à Ronald!).

Voici un exemple CSS pur que vous pouvez voir son effet dans tous les navigateurs. La capture d'écran est la suivante: (Les captures d'écran doivent être insérées ici)

Je pose cette question maintenant parce que j'ai vu Jonnie Hallman le mentionner à nouveau dans le blog. Il l'a mentionné comme un super petit détail en mai. Dans certaines interfaces, le défilement des ombres a beaucoup de sens.

Avec le recul, j'ai pensé à une solution qui fonctionne actuellement, en utilisant des événements de défilement. Si la zone de défilement a fait défiler, les ombres supérieures et gauche sont affichées. Si la zone de défilement ne fait pas défiler complètement, les ombres inférieures et droites sont affichées. Dans cet esprit, j'ai essayé l'approche la plus simple, la plus directe et la moins intelligente, qui est de placer des divs vides en haut, à droite, en bas et à gauche de la zone de défilement. J'appelle ces "bords" et je les observe en utilisant l'API d'observateur d'intersection. Si un bord ne se croit pas avec la zone de défilement, je peux supposer que le bord a fait défiler et une ombre de ce bord peut être affichée. Ensuite, une fois que les bords se croisent, je peux supposer que la zone de défilement a atteint le bord du défilement, afin que je puisse cacher cette ombre.

intelligent! Malheureusement, il n'y a pas de démo en ligne, mais lisez l'article pour plus de détails sur la mise en œuvre.

Autres exemples basés sur JavaScript

Mais je pense que si vous voulez le faire, vous devriez choisir la méthode IntersectionObserver. J'espère que je peux voir quelqu'un assembler les meilleures parties de ces idées (indices).

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!