세로 및 가로 스크롤은 마우스, 터치패드 또는 손가락을 사용하여 웹 페이지를 탐색하는 방법입니다. 세로 스크롤은 요소의 내용이 컨테이너의 높이를 초과할 때 사용됩니다. 요소 내의 콘텐츠가 컨테이너의 너비를 초과할 때 가로 스크롤이 사용됩니다. 세로 스크롤은 사용자가 웹 페이지를 위아래로 이동할 수 있게 하고 가로 스크롤은 페이지를 좌우로 이동할 수 있게 합니다. Tailwind CSS는 웹 페이지에서 수직 및 수평 스크롤을 가능하게 하는 유틸리티 클래스를 제공합니다.
이 문서에서는 다음을 예시합니다.
Tailwind에서 세로 스크롤을 활성화하는 방법은 무엇입니까?
Tailwind에서 세로 스크롤을 사용 설정하려면 ' 오버플로 스크롤 ” HTML 프로그램에서 원하는 요소가 있는 유틸리티 클래스. 수직 스크롤을 허용하고 사용자가 시스템 설정에서 '항상 보이는' 스크롤 막대를 비활성화하지 않는 한 항상 스크롤 막대를 표시합니다.
통사론
< 요소 수업 = '오버플로 스크롤 ...' > ... 요소 >
예: 세로 스크롤 활성화
이 예에서는 열에 일부 플렉스 항목이 있는 플렉스 컨테이너를 만들고 ' 오버플로 스크롤 ” 유틸리티:
< 몸 >
< 사업부 수업 = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 1 사업부 >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 2 사업부 >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 삼 사업부 >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 4 사업부 >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 5 사업부 >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 6 사업부 >
사업부 >
몸 >
여기, 상위
- “ 몸을 풀다 ” 클래스는 유연한 레이아웃을 생성하여 사용 가능한 공간을 기반으로 자식 요소의 크기를 조정하는 데 사용됩니다.
- “ flex-col ” 클래스는 컨테이너의 flex-direction을 열로 설정합니다.
- “ 오버플로 스크롤 ” 클래스는 세로 스크롤을 활성화합니다.
- “ bg-퍼플-700 ” 클래스는 보라색을 컨테이너의 배경으로 설정합니다.
- “ p-4 ” 클래스는 컨테이너의 모든 면에 4단위의 패딩을 설정합니다.
- “ mx-14 ” 클래스는 컨테이너의 x축에 여백 14단위를 적용합니다.
- “ mt-5 ” 클래스는 컨테이너 상단에 마진 5단위를 적용합니다.
- “ h-36 ” 클래스는 컨테이너의 높이를 36 단위로 설정합니다.
하위
- “ bg-옐로우-400 ” 클래스는 그리드 항목의 배경을 노란색으로 설정합니다.
- “ p-2 ” 클래스는 플렉스 항목 내부의 콘텐츠에 3단위의 패딩을 추가합니다.
- “ m-2 ” 클래스는 플렉스 항목에 2 단위 마진을 설정합니다.
산출
위의 출력에서 세로 스크롤이 성공적으로 활성화된 것을 볼 수 있습니다.
Tailwind에서 가로 스크롤을 활성화하는 방법은 무엇입니까?
Tailwind에서 가로 스크롤을 사용하려면 ' 오버플로-x-스크롤 ” HTML 프로그램의 특정 요소가 있는 유틸리티 클래스. 수평 스크롤을 활성화하고 사용자가 시스템 설정에서 '항상 보이는' 스크롤 막대를 비활성화하지 않는 한 항상 스크롤 막대를 표시합니다.
통사론
< 요소 수업 = '오버플로-x-스크롤 ...' > ... 요소 >
예: 가로 스크롤 활성화
이 예제에서는 일부 플렉스 항목이 있는 플렉스 컨테이너를 생성하고 ' 오버플로-x-스크롤 ” 유틸리티:
< 몸 >< 사업부 수업 = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 1 사업부 >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 2 사업부 >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 삼 사업부 >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 4 사업부 >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 5 사업부 >
< 사업부 수업 = 'bg-노란색-400 p-2 m-2' > 6 사업부 >
사업부 >
몸 >
여기 부모
산출
위의 출력은 가로 스크롤이 성공적으로 활성화되었음을 나타냅니다.
결론
Tailwind에서 세로 및 가로 스크롤을 사용하려면 ' 오버플로 스크롤 ' 그리고 ' 오버플로-x-스크롤 ” 유틸리티 클래스가 각각 사용됩니다. 이러한 유틸리티는 HTML 프로그램의 원하는 요소에 적용되어 수직 및 수평 스크롤을 활성화하고 항상 스크롤 막대를 표시합니다. 이 문서에서는 Tailwind에서 세로 및 가로 스크롤을 활성화하는 방법을 설명했습니다.