Cuộn dọc và ngang là cách điều hướng trang web bằng chuột, bàn di chuột hoặc ngón tay. Cuộn dọc được sử dụng khi nội dung của phần tử vượt quá chiều cao của vùng chứa. Trong khi cuộn ngang được sử dụng khi nội dung trong một phần tử vượt quá chiều rộng của vùng chứa. Cuộn dọc cho phép người dùng di chuyển trang web lên và xuống trong khi cuộn ngang cho phép trang di chuyển sang trái và phải. Tailwind CSS cung cấp các lớp tiện ích để cho phép cuộn dọc và ngang trên các trang web.
Bài viết này sẽ minh họa:
- Làm cách nào để bật tính năng cuộn dọc trong Tailwind?
- Làm cách nào để bật tính năng cuộn ngang trong Tailwind?
Làm cách nào để bật tính năng cuộn dọc trong Tailwind?
Để bật tính năng cuộn dọc trong Tailwind, hãy sử dụng “ tràn-y-cuộn ” lớp tiện ích với phần tử mong muốn trong chương trình HTML. Nó cho phép cuộn dọc và luôn hiển thị thanh cuộn trừ khi người dùng đã tắt thanh cuộn 'luôn hiển thị' trong cài đặt hệ thống của họ.
cú pháp
< yếu tố lớp học = 'tràn-y-cuộn ...' > ... yếu tố >
Ví dụ: Kích hoạt tính năng cuộn dọc
Trong ví dụ này, chúng tôi sẽ tạo một thùng chứa linh hoạt với một số mục linh hoạt trong một cột và áp dụng “ tràn-y-cuộn ” tiện ích cho nó:
< thân hình >
< div lớp học = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 1 div >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 2 div >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 3 div >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 4 div >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 5 div >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 6 div >
div >
thân hình >
Ở đây, trong
- “ uốn cong ” lớp được sử dụng để điều chỉnh kích thước của phần tử con trên cơ sở không gian có sẵn bằng cách tạo bố cục linh hoạt.
- “ flex-col ” lớp đặt hướng linh hoạt của vùng chứa thành một cột.
- “ tràn-y-cuộn ” lớp cho phép cuộn dọc.
- “ bg-tím-700 ” đặt màu tím cho nền của vùng chứa.
- “ p-4 ” lớp đặt 4 đơn vị đệm trên tất cả các mặt của vùng chứa.
- “ mx-14 ” lớp áp dụng 14 đơn vị lề trên trục x của vùng chứa.
- “ mt-5 ” lớp áp dụng 5 đơn vị ký quỹ cho phần trên cùng của vùng chứa.
- “ h-36 ” lớp đặt chiều cao của vùng chứa thành 36 đơn vị.
Trong
- “ bg-vàng-400 ” đặt nền của các mục lưới thành màu vàng.
- “ p-2 ” lớp thêm 3 đơn vị đệm vào nội dung bên trong các mục linh hoạt.
- “ m-2 ” lớp đặt lề 2 đơn vị cho các mục linh hoạt.
đầu ra
Trong đầu ra ở trên, có thể thấy rằng tính năng cuộn dọc đã được kích hoạt thành công.
Làm cách nào để bật tính năng cuộn ngang trong Tailwind?
Để bật tính năng cuộn ngang trong Tailwind, hãy sử dụng “ tràn-x-cuộn ” lớp tiện ích với phần tử cụ thể trong chương trình HTML. Nó cho phép cuộn ngang và luôn hiển thị thanh cuộn trừ khi người dùng đã tắt thanh cuộn 'luôn hiển thị' trong cài đặt hệ thống của họ.
cú pháp
< yếu tố lớp học = 'tràn-x-cuộn ...' > ... yếu tố >
Ví dụ: Kích hoạt tính năng cuộn ngang
Trong ví dụ này, chúng tôi sẽ tạo một thùng chứa linh hoạt với một số mục linh hoạt liên tiếp và áp dụng “ tràn-x-cuộn ” tiện ích cho nó:
< thân hình >< div lớp học = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 1 div >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 2 div >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 3 div >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 4 div >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 5 div >
< div lớp học = 'bg-vàng-400 p-2 m-2' > 6 div >
div >
thân hình >
Ở đây trong
đầu ra
Đầu ra ở trên cho biết tính năng cuộn ngang đã được bật thành công.
Phần kết luận
Để bật tính năng cuộn dọc và ngang trong Tailwind, hãy chọn “ tràn-y-cuộn ' Và ' tràn-x-cuộn ” các lớp tiện ích được sử dụng tương ứng. Các tiện ích này được áp dụng cho các thành phần mong muốn trong chương trình HTML để cho phép cuộn dọc và ngang và luôn hiển thị các thanh cuộn. Bài viết này đã trình bày phương pháp kích hoạt tính năng cuộn dọc và ngang trong Tailwind.