フォームコントロールを「選択するためのスクロール」を作成する方法

この記事では、選択コントロールをコンビネーションロックまたはiOS日付セレクターと同様のダイヤルスタイルのインタラクションに変換する巧妙な方法を紹介します。国の選択などの選択肢の長いリストはしばしば迷惑であり、このアプローチはこの問題を効果的に解決することができます。

コアのアイデアは、従来のクリック選択ではなく、スクロール操作を使用してオプションを選択することです。カスタムコントロールをゼロから構築する代わりに、セマンティックフォームコントロール（Radio Bottons）を巧みに利用します。

HTML構造は、ネストされた無線ボタンタググループを使用して、次のとおりです。

キーは、オプションサイズと間隔の正確な管理を実現するために、CSSスタイルの制御にあります。いくつかの基本的なスタイルは次のとおりです

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

スタイルの説明：

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

：各オプションの高さ。

• --itemHeight：オプション間の間隔。
• --itemGap：コンテナの高さ、最大7つのオプションを必ず表示してください（奇数数の中心選択アイテム）。
• 背景はグラデーションの色を使用して、中央の領域を強調表示します（チェック位置）。 --containerHeight
• および
変数は、選択した領域を視覚的に強調表示し、勾配停止を定義します。
• --topBit --footBitFlexBox Layoutの使用垂直方向の配置オプション：

CSSスクロールキャプチャを有効にします：

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

オプションのスクロールが停止していることを確認してください。

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

オーバーフローのスクロールを防ぎます。

scroll-snap-type: y mandatory;オプションスタイル：overscroll-behavior-y: none;

中央のオプションを調整します。

.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;javaScriptコードは、スクロールイベントをリッスンするために使用されます。 pointer-events: none;

APIは、要素がビューポートに入るかどうかを検出するために使用されます。

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

上記の手順を使用して、スクロールしてオプションを選択するフォームコントロールを作成します。 ページが読み込まれたときにオプションを事前に選択する必要がある場合は、javaScriptを使用してその場所を取得し、

メソッドを使用してスクロールできます。 IntersectionObserver

参照リンクとさらなる測定値：scrollTo()

交差点オブザーバーが要素がいつ見えるかを知るためのいくつかの機能的な使用（Preethi sam）

交差点オブザーバーがどのように監視するかの説明（Travis Almand）

• 実用的なCSSスクロールスナップ（Max Kohler）
• スタイリングの現在の状態は2019年に選択されます（Chris Coyier）
• CSS Flexboxレイアウトガイド（CSS-Tricks）
• css
プロパティ（css-tricks）
CSSスクロールスナッププロパティ（MDN）
• flex
（mdn）
• （githubページデモリンクとビデオリンクは、外部リソースに直接アクセスして埋め込むことができないため、ここに追加されます。）scrollTo()

以上がフォームコントロールを「選択するためのスクロール」を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。