การเลื่อนในแนวตั้งและแนวนอนเป็นวิธีการนำทางหน้าเว็บโดยใช้เมาส์ ทัชแพด หรือนิ้ว การเลื่อนแนวตั้งจะใช้เมื่อเนื้อหาขององค์ประกอบเกินความสูงของคอนเทนเนอร์ ในขณะที่ใช้การเลื่อนแนวนอนเมื่อเนื้อหาภายในองค์ประกอบเกินความกว้างของคอนเทนเนอร์ การเลื่อนในแนวตั้งช่วยให้ผู้ใช้สามารถเลื่อนหน้าเว็บขึ้นและลงได้ ในขณะที่การเลื่อนในแนวนอนช่วยให้หน้าเว็บเลื่อนไปทางซ้ายและขวาได้ Tailwind CSS มีคลาสยูทิลิตี้สำหรับเปิดใช้งานการเลื่อนหน้าเว็บในแนวตั้งและแนวนอน
บทความนี้จะยกตัวอย่าง:
วิธีเปิดใช้งานการเลื่อนแนวตั้งใน Tailwind
หากต้องการเปิดใช้การเลื่อนแนวตั้งใน Tailwind ให้ใช้ปุ่ม “ ล้น-y-เลื่อน ” คลาสยูทิลิตี้พร้อมองค์ประกอบที่ต้องการในโปรแกรม HTML อนุญาตให้เลื่อนแนวตั้งและแสดงแถบเลื่อนเสมอ เว้นแต่ผู้ใช้จะปิดใช้งานแถบเลื่อน 'ที่มองเห็นได้ตลอดเวลา' ในการตั้งค่าระบบ
ไวยากรณ์
< องค์ประกอบ ระดับ = 'ล้น-y-เลื่อน ... ' > ... องค์ประกอบ >
ตัวอย่าง: การเปิดใช้งานการเลื่อนแนวตั้ง
ในตัวอย่างนี้ เราจะสร้างคอนเทนเนอร์แบบยืดหยุ่นที่มีรายการแบบยืดหยุ่นในคอลัมน์และใช้ ' ล้น-y-เลื่อน ” ยูทิลิตี้สำหรับมัน:
< ร่างกาย >
< แผนก ระดับ = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 1 แผนก >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 2 แผนก >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 3 แผนก >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 4 แผนก >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 5 แผนก >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 6 แผนก >
แผนก >
ร่างกาย >
ที่นี่ในพาเรนต์
- “ ดิ้น ” คลาสใช้เพื่อปรับขนาดองค์ประกอบย่อยตามพื้นที่ว่างโดยสร้างเค้าโครงที่ยืดหยุ่น
- “ เฟล็กซ์คอล ” class กำหนดทิศทางแบบยืดหยุ่นของคอนเทนเนอร์เป็นคอลัมน์
- “ ล้น-y-เลื่อน ” คลาสเปิดใช้งานการเลื่อนแนวตั้ง
- “ bg-สีม่วง-700 ” คลาสกำหนดสีม่วงเป็นพื้นหลังของคอนเทนเนอร์
- “ หน้า-4 ” คลาสกำหนดช่องว่างภายใน 4 หน่วยในทุกด้านของคอนเทนเนอร์
- “ เอ็มเอ็กซ์-14 ” class ใช้ระยะขอบ 14 หน่วยบนแกน x ของคอนเทนเนอร์
- “ เอ็มที-5 ” คลาสใช้ระยะขอบ 5 หน่วยที่ด้านบนของคอนเทนเนอร์
- “ ชั่วโมง-36 ” class กำหนดความสูงของคอนเทนเนอร์เป็น 36 หน่วย
ในเด็ก
- “ bg-สีเหลือง-400 ” class ตั้งค่าพื้นหลังของรายการกริดเป็นสีเหลือง
- “ พี-2 ” class เพิ่ม 3 หน่วยของช่องว่างภายในเนื้อหาภายในรายการ flex
- “ ม.-2 ” class ตั้งค่าระยะขอบ 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-yellow-400 p-2 ม-2' > 1 แผนก >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 2 แผนก >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 3 แผนก >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 4 แผนก >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 5 แผนก >
< แผนก ระดับ = 'bg-yellow-400 p-2 ม-2' > 6 แผนก >
แผนก >
ร่างกาย >
ที่นี่ในพาเรนต์
เอาต์พุต
เอาต์พุตด้านบนระบุว่าเปิดใช้งานการเลื่อนแนวนอนสำเร็จแล้ว
บทสรุป
หากต้องการเปิดใช้การเลื่อนแนวตั้งและแนวนอนใน Tailwind ปุ่ม ' ล้น-y-เลื่อน ' และ ' ล้น x เลื่อน ” คลาสยูทิลิตี้ถูกใช้ตามลำดับ ยูทิลิตีเหล่านี้ใช้กับองค์ประกอบที่ต้องการในโปรแกรม HTML เพื่อเปิดใช้งานการเลื่อนแนวตั้งและแนวนอน และแสดงแถบเลื่อนเสมอ บทความนี้ได้สาธิตวิธีการเปิดใช้การเลื่อนแนวตั้งและแนวนอนใน Tailwind