Comment faire un contrôle de formulaire «défiler pour sélectionner»

Cet article introduit un moyen intelligent de convertir le contrôle de sélection en une interaction de style dialtaire similaire à un verrouillage de combinaison ou un sélecteur de date iOS. Les longues listes de choix, telles que les choix de pays, sont souvent ennuyeuses, et cette approche peut résoudre efficacement ce problème.

L'idée principale est: utiliser les opérations de défilement pour sélectionner les options, plutôt que la sélection de clics traditionnels. Au lieu de construire des commandes personnalisées à partir de zéro, nous utilisons intelligemment des commandes de forme sémantique: les boutons Radio.

La structure HTML est la suivante, en utilisant le groupe de balises de boutons radio imbriqués:

<label for="madrid">
      Madrid 
      <abbr>MAD</abbr>
      </label>
  <label for="malta">
      Malta 
      <abbr>MLA</abbr>
      </label>

La clé réside dans le contrôle des styles CSS pour obtenir une gestion précise des tailles d'options et de l'espacement. Voici quelques styles de base:

.scroll-container {
  /* 尺寸和布局 */
\--itemHeight: 60px;
\--itemGap: 10px;
\--containerHeight: calc((var(--itemHeight) * 7) + (var(--itemGap) * 6));

  width: 400px; 
  height: var(--containerHeight);
  align-items: center;
  row-gap: var(--itemGap);
  border-radius: 4px;

  /* 样式 */
\--topBit: calc((var(--containerHeight) - var(--itemHeight))/2);
\--footBit: calc((var(--containerHeight) + var(--itemHeight))/2);

  background: linear-gradient(
    rgb(254 251 240), 
    rgb(254 251 240) var(--topBit), 
    rgb(229 50 34 / .5) var(--topBit), 
    rgb(229 50 34 / .5) var(--footBit), 
    rgb(254 251 240) 
    var(--footBit));
  box-shadow: 0 0 10px #eee;
}

DESCRIPTION STYLE:

• --itemHeight: La hauteur de chaque option.
• --itemGap: l'espacement entre les options.
• --containerHeight: hauteur du conteneur, assurez-vous d'afficher jusqu'à sept options (les numéros impairs centrent l'élément sélectionné).
• L'arrière-plan utilise des couleurs de dégradé pour mettre en évidence la zone centrale (position vérifiée).
Les variables
• --topBit et --footBit définissent les arrêts de gradient, mettant visuellement la zone sélectionnée.

Utilisez des options de disposition verticale de mise en page Flexbox:

.scroll-container {
  display: flex; 
  flex-direction: column;
  /* 其他样式 */
}

Activer la capture de défilement CSS:

.scroll-container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
  /* 其他样式 */
}

scroll-snap-type: y mandatory; Assurez-vous que le défilement s'arrête sur l'option. overscroll-behavior-y: none; Évitez le débordement de défilement.

Style d'option:

.scroll-item {
  /* 尺寸和布局 */
  width: 90%;
  box-sizing: border-box;
  padding-inline: 20px;
  border-radius: inherit; 

  /* 样式和字体 */
  background: linear-gradient(to right, rgb(242 194 66), rgb(235 122 51));
  box-shadow: 0 0 4px rgb(235 122 51);
  font: 16pt/var(--itemHeight) system-ui;
  color: #fff;

  input { appearance: none; } 
  abbr { float: right; } /* 机场代码 */

  /* 选中状态样式 */
  &:has(:checked) {
    background: rgb(229 50 34);
  }
}

scroll-snap-align: center; Alignez les options centrées. pointer-events: none; Bloquer la sélection de clics, sélectionnez uniquement en faisant défiler.

Le code JavaScript est utilisé pour écouter les événements de défilement, en définissant l'option Scroll to Center pour sélectionner:

let observer = new IntersectionObserver(entries => { 
  entries.forEach(entry => {
    with(entry) if(isIntersecting) target.children[1].checked = true;
  });
}, { 
  root: document.querySelector(`.scroll-container`), rootMargin: `-51% 0px -49% 0px`
});

document.querySelectorAll(`.scroll-item`).forEach(item => observer.observe(item));

L'API

IntersectionObserver est utilisée pour détecter si un élément entre dans la fenêtre.

Utilisez les étapes ci-dessus pour créer un contrôle de formulaire qui sélectionne les options en faisant défiler. Si vous devez présélectionner une option lorsque la page est chargée, vous pouvez obtenir son emplacement via JavaScript et lui faire défiler à l'aide de la méthode scrollTo().

Liens de référence et lectures supplémentaires:

• quelques utilisations fonctionnelles pour l'observateur d'intersection pour savoir quand un élément est en vue (Preethi Sam)
• Une explication de la façon dont l'observateur d'intersection regarde (Travis Almand)
• Scroll de défilement CSS pratique (Max Kohler)
• L'état actuel du style sélectionne en 2019 (Chris Coyier)
• Guide de mise en page CSS Flexbox (CSS-Tricks)
• CSS flex Propriété (CSS-Tricks)
• CSS Scroll Snap Properties (MDN)
• scrollTo() (mdn)

(lien de démonstration de page GitHub et lien vidéo seront ajoutés ici car je ne peux pas accéder et intégrer directement les ressources externes.)

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!