גלילה אנכית ואופקית הן דרכים לניווט בדף אינטרנט באמצעות עכבר, משטח מגע או אצבע. גלילה אנכית משמשת כאשר התוכן של אלמנט חורג מגובה המיכל. בעוד גלילה אופקית משמשת כאשר התוכן בתוך אלמנט חורג מרוחב המיכל. גלילה אנכית מאפשרת למשתמשים להזיז את דף האינטרנט למעלה ולמטה ואילו גלילה אופקית מאפשרת לנוע של הדף ימינה ושמאלה. Tailwind CSS מספקת כיתות שירות כדי לאפשר גלילה אנכית ואופקית בדפי אינטרנט.
מאמר זה ידגים:
כיצד לאפשר גלילה אנכית ברוח הגבית?
כדי לאפשר גלילה אנכית ב-Tailwind, השתמש ב-' overflow-y-croll ” מחלקת השירות עם האלמנט הרצוי בתוכנת HTML. זה מאפשר גלילה אנכית ותמיד מציג את פסי הגלילה, אלא אם המשתמש השבית את פסי הגלילה 'הגלויים תמיד' בהגדרות המערכת שלו.
תחביר
< אֵלֵמֶנט מעמד = 'הוצף-י-גלילה...' > ... אֵלֵמֶנט >
דוגמה: הפעלת גלילה אנכית
בדוגמה זו, ניצור מיכל flex עם כמה פריטי flex בעמודה ונחיל את ה-' overflow-y-croll 'תועלת לזה:
< גוּף >
< div מעמד = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 1 div >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 2 div >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 3 div >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 4 div >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 5 div >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
גוּף >
כאן, ב-
- ' לְהַגמִישׁ 'מחלקה משמשת כדי להתאים את הגדלים של אלמנט הילד על בסיס השטח הפנוי על ידי יצירת פריסה גמישה.
- ' flex-col מחלקה מגדירה את כיוון הגמישות של המיכל לעמודה.
- ' overflow-y-croll מחלקה מאפשרת גלילה אנכית.
- ' bg-purple-700 הכיתה מגדירה את הצבע הסגול לרקע של המיכל.
- ' p-4 הכיתה קובעת 4 יחידות ריפוד על כל הצדדים של המכולה.
- ' mx-14 ” class מחילה את 14 יחידות השוליים על ציר ה-x של המכולה.
- ' mt-5 מחלקה מחילה את 5 יחידות השוליים על החלק העליון של המיכל.
- ' h-36 ” מחלקה מגדירה את גובה המכולה ל-36 יחידות.
בילד
- ' bg-yellow-400 מחלקה מגדירה את הרקע של פריטי הרשת לצהוב.
- ' p-2 ” הכיתה מוסיפה 3 יחידות ריפוד לתוכן בתוך הפריטים הגמישים.
- ' m-2 ' מחלקה מגדירה את מרווח 2 היחידות לפריטי הגמיש.
תְפוּקָה
בפלט לעיל, ניתן לראות שגלילה אנכית הופעלה בהצלחה.
כיצד לאפשר גלילה אופקית ברוח גב?
כדי לאפשר גלילה אופקית ב-Tailwind, השתמש ב-' overflow-x-croll מחלקת השירות עם האלמנט הספציפי בתוכנת HTML. זה מאפשר גלילה אופקית ותמיד מציג את פסי הגלילה, אלא אם המשתמש השבית את פסי הגלילה 'הגלויים תמיד' בהגדרות המערכת שלו.
תחביר
< אֵלֵמֶנט מעמד = 'הצפת-x-גלילה...' > ... אֵלֵמֶנט >
דוגמה: הפעלת גלילה אופקית
בדוגמה זו, ניצור מיכל flex עם כמה פריטי flex בשורה ונחיל את ה-' overflow-x-croll 'תועלת לזה:
< גוּף >< div מעמד = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 1 div >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 2 div >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 3 div >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 4 div >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 5 div >
< div מעמד = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
גוּף >
כאן ב-
תְפוּקָה
הפלט לעיל מציין שהגלילה האופקית הופעלה בהצלחה.
סיכום
כדי לאפשר גלילה אנכית ואופקית ב-Tailwind, ' overflow-y-croll ' ו' overflow-x-croll 'מחלקות שירות משמשות בהתאמה. כלי עזר אלה מיושמים על האלמנטים הרצויים בתוכנת HTML כדי לאפשר גלילה אנכית ואופקית ולהציג תמיד את פסי הגלילה. מאמר זה הדגים את השיטה לאפשר גלילה אנכית ואופקית ב-Tailwind.