'SCROLL SELECT'를 만드는 방법 양식 제어

이 기사는 선택 제어를 조합 잠금 또는 iOS 날짜 선택기와 유사한 다이얼 스타일 상호 작용으로 변환하는 영리한 방법을 소개합니다. 국가 선택과 같은 긴 선택 목록은 종종 성가 시며,이 접근법은이 문제를 효과적으로 해결할 수 있습니다.

핵심 아이디어는 다음과 같습니다. 스크롤 작업을 사용하여 전통적인 클릭 선택이 아닌 옵션을 선택하십시오. 맞춤 제어를 처음부터 구축하는 대신 시맨틱 양식 컨트롤 (라디오 버튼)을 영리하게 사용합니다.

HTML 구조는 다음과 같습니다. 중첩 라디오 버튼을 사용하여 태그 그룹 :

핵심은 옵션 크기와 간격을 정확하게 관리하기 위해 CSS 스타일을 제어하는 ​​데 있습니다. 다음은 몇 가지 기본 스타일입니다

스타일 설명 :

: 각 옵션의 높이.

: 옵션 사이의 간격.

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

: 컨테이너 높이, 최대 7 개의 옵션을 표시하십시오 (선택된 항목의 홀수 중심).

배경은 그라디언트 색상을 사용하여 중간 영역을 강조합니다 (확인 된 위치).

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

및

변수는 구배 정지를 정의하여 선택한 영역을 시각적으로 강조합니다.

Flexbox 레이아웃 수직 배열 옵션 사용 :
• --itemHeight CSS 스크롤 캡처 활성화 :
• 옵션에서 스크롤이 중지되는지 확인하십시오. 오버플로 스크롤을 방지합니다. --itemGap 옵션 스타일 :
• 중앙에있는 옵션을 정렬합니다. 블록 블록 클릭을 클릭하고 스크롤 만으로만 선택하십시오. --containerHeight JavaScript 코드는 스크롤 이벤트를 듣는 데 사용됩니다. 스크롤을 중앙으로 설정하여 선택합니다.
• API는 요소가 뷰포트에 들어가는 지 여부를 감지하는 데 사용됩니다.
위의 단계를 사용하여 스크롤하여 옵션을 선택하는 양식 컨트롤을 만듭니다. 페이지를로드 할 때 옵션을 사전 선택 해야하는 경우 메소드를 사용하여 JavaScript를 통해 위치를 가져올 수 있습니다.
• --topBit 참조 링크 및 추가 판독 값 : --footBit 교차 관찰자가 요소가 시야시기를 알기위한 몇 가지 기능적 용도 (Preethi Sam) 교차로 관찰자가 어떻게 시계 (Travis Almand)에 대한 설명 실용 CSS 스크롤 스냅 (Max Kohler) 현재 스타일링 상태가 2019 년에 선택됩니다 (Chris Coyier) CSS Flexbox 레이아웃 가이드 (CSS- 트릭) CSS css

속성 (css-tricks) CSS 스크롤 스냅 속성 (mdn)

(mdn)

(외부 리소스에 직접 액세스하고 포함 할 수 없기 때문에 여기에 Github 페이지 데모 링크 및 비디오 링크가 추가됩니다.)

위 내용은 'SCROLL SELECT'를 만드는 방법 양식 제어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!