یہ مضمون متعدد مثالوں کے ساتھ CSS overflow-y پراپرٹی کے استعمال کو ظاہر کرتا ہے۔
CSS میں Overflow-y پراپرٹی کا استعمال کیسے کریں؟
سی ایس ایس ' overflow-y ” پراپرٹی کا استعمال کسی عنصر کے اندر کراس ایکسس کے ساتھ مواد کے بہاؤ کو کنٹرول کرنے کے لیے کیا جاتا ہے۔ یہ بتاتا ہے کہ آیا مواد کو کلپ کرنا ہے یا اسکرول بار کو شامل کرنا ہے جب مواد کنٹینر کی اونچائی سے زیادہ ہو۔ اس پراپرٹی کی ممکنہ قدریں ہیں ' نظر آنے والا '،' چھپا ہوا '،' سکرول '، اور ' آٹو '
آئیے اوور فلو وائی پراپرٹی کے بہتر مظاہرے کے لیے ذیل کی مثالیں دیکھیں۔
مثال 1: Overflow-y پراپرٹی کی قدر کے طور پر مرئی کا استعمال
' نظر آنے والا ” ویلیو مواد کو کنٹینر سے اوور فلو کرنے کی اجازت دیتی ہے اور کوئی کلپنگ یا اسکرول بار شامل نہیں کرتی ہے۔ ذیل میں عملی کوڈ بلاک ملاحظہ کریں:
>
>
>
مندرجہ بالا کوڈ بلاک کی تفصیل:
- سب سے پہلے، 'کی قدر تفویض کریں والدین ' کرنے کے لئے ' کلاس 'وصف اور استعمال کریں' انداز ' وصف.
- اس کے علاوہ، 'کی قدر فراہم کریں نظر آنے والا 'سی ایس ایس کو' overflow-y ' جائیداد. اور اسے ' کے برابر سیٹ کریں انداز سی ایس ایس اسٹائلنگ کو کام کرنے کے لیے خصوصیت۔
- اگلا، ایک نیسٹڈ بنائیں ' div عنصر اور اسے ایک کلاس تفویض کریں بچوں کا مواد ' اس کے علاوہ، اسے ڈمی ڈیٹا فراہم کریں.
اب، ویژولائزیشن کو بڑھانے کے لیے سی ایس ایس پراپرٹیز کا استعمال کریں جس سے سی ایس ایس اوور فلو وائی پراپرٹی کو بہتر طور پر سمجھنے میں مدد ملتی ہے:
.والدین {چوڑائی : 200px ;
اونچائی : 150px ;
سرحد : 1px ٹھوس سیاہ ;
}
بچے کا مواد {
اونچائی : 300px ;
پس منظر کا رنگ : ہلکے نیلے رنگ کے ;
}
سی ایس ایس پراپرٹیز کی تفصیل ذیل میں دی گئی ہے:
- سب سے پہلے، ' والدین 'کلاس منتخب کیا گیا ہے اور' کی اقدار 200px '،' 150px '، اور ' 1px ٹھوس سیاہ 'سی ایس ایس کو تفویض کیا گیا ہے' چوڑائی '،' اونچائی '، اور ' سرحد 'خصوصیات، بالترتیب.
- اگلا، منتخب کریں ' بچوں کا مواد 'کلاس کریں اور' کی اقدار مقرر کریں 300px 'اور' ہلکے نیلے رنگ کے 'سی ایس ایس کو' اونچائی 'اور' پس منظر کا رنگ 'خصوصیات، بالترتیب. اس کلاس کو ' والدین 'کلاس جو CSS کے ذریعے کنٹرول ہوتی ہے' بہاؤ ' جائیداد.
کوڈ کے ٹکڑوں کی تالیف کے بعد، ویب صفحہ اس طرح ظاہر ہوتا ہے:
اسنیپ شاٹ دکھاتا ہے کہ اوور فلو مواد اب نظر آ گیا ہے اور اسکرول بار یا کلپنگ کو بطور ڈیفالٹ شامل نہیں کیا گیا ہے۔
مثال 2: Overflow-y پراپرٹی کے لیے پوشیدہ کو قدر کے طور پر استعمال کرنا
' overflow-y 'کی قیمت کے ساتھ جائیداد' چھپا ہوا ” وہ تمام مواد چھپاتا ہے جو اس کے پیرنٹ کنٹینر سے باہر جاتا ہے۔ یہ خاصیت اسکرول بارز کو شامل نہیں کرتی ہے بجائے اس کے کہ اس نے بہتے ہوئے مواد کو تراش لیا:
>
>
مندرجہ بالا کوڈ کے ٹکڑوں پر مشتمل ہے:
- سب سے پہلے، وہی کوڈ دوبارہ داخل کیا جاتا ہے جس میں ڈمی مواد کو اندرونی div عنصر کے اندر رکھا جاتا ہے۔
- اگلا، 'کی قدر کو تبدیل کریں overflow-y ' جائیداد کو ' چھپا ہوا ' کرنے کے لئے ' 'ٹیگ جس کی کلاس ہو' والدین '
ویب پیج کو دوبارہ رینڈر کرنے کے بعد ایسا لگتا ہے:
سنیپ شاٹ دکھاتا ہے کہ اوور فلو مواد کو تراش دیا گیا ہے۔
مثال 3: Overflow-y پراپرٹی کے لیے بطور قدر اسکرول کا استعمال
کی قدر کا تعین ' overflow-y 'جائیداد' سکرول ” اختتامی صارف کو اسکرول کرنے کی اجازت دیتا ہے۔
مواد جو اسے چھلکتا ہے۔ آئیے درج ذیل کوڈ بلاک پر جائیں:
= 'والدین' انداز = 'overflow-y: scroll؛' >
= 'بچوں کا مواد' > یہ صرف ڈمی ہے۔ مواد اوور فلو وائی پراپرٹی کے مظاہرے کے لیے استعمال کیا جاتا ہے جب اسے نظر آنے پر سیٹ کیا جاتا ہے۔ یہ صرف ڈمی ہے۔ مواد اوور فلو وائی پراپرٹی کے مظاہرے کے لیے استعمال کیا جاتا ہے جب اسے نظر آنے پر سیٹ کیا جاتا ہے۔
>
>مندرجہ بالا کوڈ بلاک میں:
- سب سے پہلے، وہی ایچ ٹی ایم ایل ڈھانچہ ' کے اندر داخل کیا گیا ہے 'ٹیگ۔
- اگلا، 'کی قدر کو تبدیل کریں overflow-y 'جائیداد' سکرول ' یہ اجازت دیتا ہے ' والدین ” div زیادہ بہہ جانے والے مواد کو کنٹرول کرنے کے لیے سکرولنگ اثر کو فعال کرنے کے لیے۔
مندرجہ بالا کوڈ بلاک کی تالیف کے بعد، ویب صفحہ اس طرح ظاہر ہوتا ہے:
مندرجہ بالا gid واضح کرتا ہے کہ اسکرولنگ اثر زیادہ بہہ جانے والے مواد کو کنٹرول کرنے کے لیے دستیاب ہے۔
مثال 4: اوور فلو-y پراپرٹی کے لیے آٹو کو بطور قدر استعمال کرنا
اس مثال میں، صارف صرف اس صورت میں اسکرول بار شامل کر سکتے ہیں جب مواد کنٹینر میں فٹ نہ ہو۔ نیز، اگر مواد اوور فلو نہیں ہوتا ہے تو اسکرول بار کو شامل نہیں کیا جائے گا۔ یہ 'کی قدر فراہم کرکے ممکن ہے آٹو 'سی ایس ایس کو' overflow-y جائیداد:
= 'والدین' انداز = 'overflow-y: auto؛' >
= 'بچوں کا مواد' > یہ صرف ڈمی ہے۔ مواد اوور فلو وائی پراپرٹی کے مظاہرے کے لیے استعمال کیا جاتا ہے جب اسے نظر آنے پر سیٹ کیا جاتا ہے۔ یہ صرف ڈمی ہے۔ مواد اوور فلو وائی پراپرٹی کے مظاہرے کے لیے استعمال کیا جاتا ہے جب اسے نظر آنے پر سیٹ کیا جاتا ہے۔
>
>مندرجہ بالا کوڈ بلاک میں:
- پہلے وہی ایچ ٹی ایم ایل فائل داخل کریں ' 'ٹیگ۔
- اگلا، 'کی قدر کو اپ ڈیٹ کریں overflow-y ' جائیداد کو ' آٹو ' یہ مواد کی عمودی لمبائی کے نسبت سکرولنگ اثر کو قابل بناتا ہے۔
تالیف کے عمل کے اختتام کے بعد، ویب صفحہ اس طرح کام کرتا ہے:
مندرجہ بالا gif اوور فلو پراپرٹی کو دکھاتا ہے جس نے مواد کی لمبائی کے مطابق اسکرول بار کو فعال کیا ہے۔
نتیجہ
سی ایس ایس ' overflow-y ” پراپرٹی کا استعمال کسی عنصر کے اندر کراس ایکسس کے ساتھ بہہ جانے والے مواد کو کنٹرول کرنے کے لیے کیا جاتا ہے۔ اوور فلو وائی پراپرٹی اوور فلو وائی پراپرٹیز کو فراہم کردہ مخصوص قدر کے مطابق مواد کو کنٹرول کرتی ہے۔ ' بصری 'قدر بہہ جانے والے مواد کو ظاہر کرتی ہے،' چھپا ہوا ' قدر اوور فلو مواد کو چھپاتا ہے، اور ' سکرول ” ویلیو مواد کو کنٹرول کرنے کے لیے اسکرول بار کا اضافہ کرتی ہے۔ اور اگر قیمت ہے ' آٹو ” اسکرول بار مواد کی لمبائی کے مطابق شامل یا ہٹاتا ہے۔