Catégories
Astuces et Design

Une «nouvelle direction» dans la lutte contre le défilement vers la droite

Un tiroir de menu glisse depuis le côté gauche de l'écranL'autre jour, je construisais un site Web réactif avec un menu de navigation qui glisse en vue de gauche lorsque vous cliquez sur le bouton de menu.

J'étais sur le point de me diriger vers le pub, mais j'ai ensuite appris que le menu était censé glisser du droite côté à la place.

Pas grave. Avec quelques lignes de CSS, je peux définir la position par défaut sur le bord droit…

Un élément positionné hors écran à droite provoque le défilementMais oh non! Un élément sur le bord droit de l'écran provoquera un défilement horizontal. Ce n'est pas cool.

Ma première pensée a été de toucher des vieux fidèles overflow-x:hidden et être sur mon chemin. Mais il y a quelques situations courantes où cela ne fonctionnera pas:

  • Certaines des nombreuses solutions Clearfix bien-aimées pour contenir des flotteurs utilisent overflow:auto;
  • Si l'un des éléments enfants est position:sticky; ils cesseront de coller si leur parent overflow la valeur est autre chose que visible. Ceci est expliqué dans cette réponse Stackoverflow.
Zut. Maintenant quoi? J'aimerais pouvoir forcer le côté droit de l'écran à se comporter comme le côté gauche. Eh bien, il s'avère que nous le pouvons! L'origine de la barre de défilement peut être inversée avec la propriété CSS direction moins connue, qui est utilisée pour définir la direction du flux de contenu texte.
body,
html {
direction: rtl;
}
body * {
direction: ltr;
}

La première règle change la direction du texte du nœud racine et du corps de droite à gauche. Cela signifie également que l'origine de la barre de défilement commence à droite et s'étend à gauche. Ce sont les éléments qui étaient auparavant débordés par ce menu de droite. Mais maintenant, ils ne se soucient plus des éléments cachés «derrière» du côté droit.

Réglage direction à rtl inversera également l'alignement par défaut du texte, et l'anglais a l'air drôle de droite à gauche. Ainsi, la règle suivante réinitialise tous les enfants de l'élément body dans la direction de texte de gauche à droite par défaut.

Je n'ai pas encore utilisé ce hack en production, et je n'ai pas encore fait de tests inter-navigateurs approfondis. Si vous avez de bonnes ou de mauvaises expériences avec cette technique, j'aimerais en entendre parler.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *