Positionner des barres de défilement verticales sur le côté opposé avec CSS

AVERTISSEMENT: Je ne recommande pas cela en général car cela rompt la perception générale de la position de la barre de défilement, ce qui est très utile pour de nombreux utilisateurs, sans oublier que c'est une accessibilité de base pour de nombreuses personnes.

Cependant, il s'agit d'une astuce CSS fascinante, le monde en ligne est énorme et complexe, et toutes sortes de situations peuvent nécessiter des solutions particulières.

Méthode 1: Compétences en direction

L'astuce ici est de faire en sorte que l'élément parent de défilement utilise direction: rtl (ou dans la direction opposée à votre direction principale), puis laissez l'élément de défilement reculer en interne vers votre direction normale.

Méthode 2: Compétences en rotation

La modification de l'orientation du texte à des fins d'orientation sans texte me rend toujours un peu mal à l'aise, donc cette technique ne pense pas qu'elle est si "méthode de pirate". L'astuce consiste à faire pivoter l'élément parent de 180 degrés, puis à faire pivoter l'élément enfant de 180 degrés pour le restaurer à son état vertical.

En raison de la première rotation, la barre de défilement se termine du côté opposé.

Il y a deux raisons particulièrement embarrassantes de cette approche:

1. L'élément de défilement défile en bas par défaut.
2. Lorsque vous faites défiler avec le rouleau, la direction de défilement semble inversée. La barre de défilement elle-même doit se comporter normalement, mais le trackpad ou la roue de la souris sentira que la direction de défilement de l'élément est inversée.

Cela ressemble plus à une blague de poisson d'avril qu'une méthode pratique. Un tweet viral l'a appelé "maudit" et oui, c'est le cas.

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!