So erstellen

In diesem Artikel wird eine clevere Möglichkeit eingeführt, die Auswahlregelung in eine Wählstil-Interaktion zu konvertieren, die einer Kombinationsschloss oder einem iOS-Datumsauswahl ähnelt. Lange Listen von Auswahlmöglichkeiten, wie z. B. Länderauswahl, sind oft ärgerlich, und dieser Ansatz kann dieses Problem effektiv lösen.

Die Kernidee lautet: Verwenden Sie Scrolling -Operationen, um Optionen auszuwählen, anstatt eine herkömmliche Klickauswahl. Anstatt benutzerdefinierte Bedienelemente von Grund auf neu zu erstellen, verwenden wir semantische Formsteuerungen geschickt.

HTML -Struktur ist wie folgt unter Verwendung der verschachtelten Optionsfelder -Tag -Gruppe:

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

Der Schlüssel liegt in der Kontrolle der CSS -Stile, um eine genaue Verwaltung von Optionsgrößen und Abstand zu erreichen. Hier sind einige grundlegende Stile:

.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;
}

Stilbeschreibung:

• --itemHeight: Die Höhe jeder Option.
• --itemGap: Der Abstand zwischen den Optionen.
• --containerHeight: Containerhöhe, stellen Sie sicher, dass Sie bis zu sieben Optionen angezeigt werden (Odd Numbers Center das ausgewählte Element).
• Der Hintergrund verwendet Gradientenfarben, um den mittleren Bereich hervorzuheben (geprüfte Position).
Die Variablen
• --topBit und --footBit definieren Gradientenstopps und markieren visuell den ausgewählten Bereich.

Verwenden Sie vertikale Anordnungsoptionen des Flexbox -Layouts:

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

Aktivieren Sie CSS Scroll Capture:

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

scroll-snap-type: y mandatory; Stellen Sie sicher, dass die Scrolling der Option stoppt. overscroll-behavior-y: none; Vorlauf des Scrollens verhindern.

Optionsstil:

.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; Richten Sie die zentrierten Optionen aus. pointer-events: none; Klicken auf Auswahl blockieren, nur durch Scrollen auswählen.

JavaScript -Code wird verwendet, um nach Scroll -Ereignissen zu hören und die Option "Scrollen in die Zentrum" einzustellen, um:

zu wählen:

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));

IntersectionObserver

API wird verwendet, um festzustellen, ob ein Element in das Ansichtsfenster eingeht.

scrollTo() Verwenden Sie die oben genannten Schritte, um ein Formularsteuer zu erstellen, das Optionen durch Scrollen auswählt. Wenn Sie beim Laden der Seite eine Option vorab auswählen müssen, können Sie ihren Speicherort über JavaScript erhalten und mit der

-Methode darauf scrollen.

Referenzlinks und weitere Lesungen:

Ein paar funktionale Verwendungen für den Schnittbeobachter, um zu wissen, wann ein Element in Ansicht ist (Preethi sam)
Eine Erklärung, wie der Schnittbeobachter beobachtet (Travis Almand)
Praktische CSS -Scroll -Schnappschüsse (Max Kohler)
Der aktuelle Status des Stylings wählt 2019 (Chris Coyier)
• aus
CSS Flexbox Layout-Handbuch (CSS-Tricks)
• flex CSS
Eigenschaft (CSS-Tricks)
CSS Scroll Snap Properties (MDN)
• scrollTo()
(mdn)

(GitHub -Seite -Demo -Link und Videolink werden hier hinzugefügt, da ich nicht direkt zugreifen und externe Ressourcen einbetten kann.)

Das obige ist der detaillierte Inhalt vonSo erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!