如何製作'選擇”表單控件

本文介紹一種巧妙的方法，將選擇控件轉變為類似組合鎖或iOS日期選擇器的撥盤式交互。長長的選擇列表，例如國家選擇，常常令人不勝其煩，此方法可有效解決此問題。

核心思想是：利用滾動操作選擇選項，而非傳統的點擊選擇。我們並非從零開始構建自定義控件，而是巧妙地利用語義化的表單控件——單選按鈕。

HTML結構如下，使用嵌套單選按鈕的標籤組：

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

關鍵在於CSS樣式的控制，實現對選項大小和間距的精確管理。以下是一些基礎樣式：

.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：選項之間的間距。
• --containerHeight：容器高度，確保最多顯示七個選項（奇數個選項使選中項居中）。
• 背景使用漸變色突出顯示中間區域（選中項位置）。
• --topBit 和 --footBit 變量定義漸變色停靠點，視覺上突出選中項區域。

使用Flexbox佈局垂直排列選項：

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

啟用CSS滾動捕捉：

.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; 使選項居中對齊。 pointer-events: none; 阻止點擊選擇，僅通過滾動選擇。

JavaScript代碼用於監聽滾動事件，將滾動到中心的選項設置為選中狀態：

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用於檢測元素是否進入視口。

通過以上步驟，即可創建一個通過滾動選擇選項的表單控件。 如果需要頁面加載時預選一個選項，可以通過JavaScript獲取其位置並使用scrollTo()方法滾動到該位置。

參考鏈接和進一步閱讀:

• A Few Functional Uses for Intersection Observer to Know When an Element is in View (Preethi Sam)
• An Explanation of How the Intersection Observer Watches (Travis Almand)
• Practical CSS Scroll Snapping (Max Kohler)
• The Current State of Styling Selects in 2019 (Chris Coyier)
• CSS Flexbox Layout Guide (CSS-Tricks)
• CSS flex property (CSS-Tricks)
• CSS Scroll Snap Properties (MDN)
• scrollTo() (MDN)

(GitHub頁面演示鏈接和視頻鏈接將在此處補充，因為我無法直接訪問和嵌入外部資源。)

以上是如何製作'選擇”表單控件的詳細內容。更多資訊請關注PHP中文網其他相關文章！