یہ مضمون مواد کو بہہ جانے سے روکنے اور CSS کا استعمال کرتے ہوئے اسکرولنگ کو فعال کرنے کے طریقے کو ظاہر کرتا ہے۔
مواد کے بہاؤ کو کیسے روکا جائے اور اسکرولنگ کو کیسے فعال کیا جائے؟
مواد کو بہنے سے روکنے کا مقصد یہ ہے کہ مواد اس کے کنٹینر میں فٹ ہو جائے اور ویب سائٹ کی کارکردگی پر منفی اثر نہ پڑے۔ یہ سیاق و سباق کو آسانی سے سمجھ سکتا ہے اور صارفین کی رسائی کو بہتر بنا سکتا ہے۔ تفصیلی وضاحت کے لیے آئیے ایک مثال کے ذریعے بات کرتے ہیں:
مرحلہ 1: مواد کے اوور فلو کے ساتھ اسکرولنگ کو فعال کریں۔
ابتدائی طور پر، HTML فائل کے اندر ایک ٹیبل بنانے کے ساتھ شروع کریں جس پر اسکرولنگ اثر لاگو ہوگا۔ آئیے فرض کریں، ٹیبل پہلے ہی بن چکا ہے، اور یہ چھ قطاروں اور سات کالموں پر مشتمل ہے، اور ٹیبل کو کچھ ڈمی ڈیٹا فراہم کیا گیا ہے:
< ٹیبل >
< tr >
< ویں > سر 1 < / ویں >
< ویں > سر 2 < / ویں >
< ویں > سر 3 < / ویں >
< ویں > سر 4 < / ویں >
< ویں > سر 5 < / ویں >
< ویں > سر 6 < / ویں >
< ویں > سر 7 < / ویں >
< / tr >
< tr >
< td > قطار 1 < / td >
< td > قطار 1 < / td >
< td > قطار 1 < / td >
< td > قطار 1 < / td >
< td > قطار 1 < / td >
< td > قطار 1 < / td >
< td > قطار 1 < / td >
< / tr >
< tr >
< td > قطار 2 < / td >
< td > قطار 2 < / td >
< td > قطار 2 < / td >
< td > قطار 2 < / td >
< td > قطار 2 < / td >
< td > قطار 2 < / td >
< td > قطار 2 < / td >
< / tr >
< tr >
< td > قطار 3 < / td >
< td > قطار 3 < / td >
< td > قطار 3 < / td >
< td > قطار 3 < / td >
< td > قطار 3 < / td >
< td > قطار 3 < / td >
< td > قطار 3 < / td >
< / tr >
< tr >
< td > قطار 4 < / td >
< td > قطار 4 < / td >
< td > قطار 4 < / td >
< td > قطار 4 < / td >
< td > قطار 4 < / td >
< td > قطار 4 < / td >
< td > قطار 4 < / td >
< / tr >< tr >
< td > قطار 5 < / td >
< td > قطار 5 < / td >
< td > قطار 5 < / td >
< td > قطار 5 < / td >
< td > قطار 5 < / td >
< td > قطار 5 < / td >
< td > قطار 5 < / td >
< / tr >
< tr >
< td > قطار 6 < / td >
< td > قطار 6 < / td >
< td > قطار 6 < / td >
< td > قطار 6 < / td >
< td > قطار 6 < / td >
< td > قطار 6 < / td >
< td > قطار 6 < / td >
< / tr >
< / ٹیبل >
مندرجہ بالا کوڈ کے ٹکڑوں پر عمل درآمد کے بعد، ویب صفحہ اس طرح ظاہر ہوتا ہے:
آؤٹ پٹ دکھاتا ہے کہ ٹیبل ڈیٹا کم پڑھنے کے قابل فارمیٹ میں ہے اور ٹیبل کے ذریعہ کافی جگہ حاصل کی گئی ہے۔
مرحلہ 2: اوور فلو اور اسکرولنگ اثر مرتب کرنا مندرجہ بالا کوڈ کے ٹکڑوں میں: مندرجہ بالا کوڈ کے ٹکڑوں پر عمل درآمد کے بعد، ویب صفحہ اس طرح ظاہر ہوتا ہے: ویب صفحہ واضح کرتا ہے کہ ٹیبل اب کم جگہ استعمال کر رہا ہے اور مواد کو بہنے سے روک رہا ہے۔ اس کے علاوہ، سکرولنگ اثر کو فعال کر دیا گیا ہے۔ نوٹ : ترتیب دے کر ' overflow : آٹو 'یا' overflow : طومار کرنا ”، صارفین بہتے ہوئے مواد کے لیے اسکرولنگ کو فعال کر سکتے ہیں۔ اس کے علاوہ، ' چھپا ہوا رساو ” کو مکمل طور پر اوور فلو کو روکنے کے لیے استعمال کیا جا سکتا ہے۔ 'اوور فلو-x' اور 'اوور فلو-y' خصوصیات کو اوور فلو کو کنٹرول کرنے اور افقی اور عمودی محور پر سکرولنگ کو فعال کرنے کے لیے استعمال کیا جاتا ہے۔ یہ مواد کو بہنے سے روکتا ہے اور تمام آلات کے لیے ایک انٹرایکٹو ریسپانسیو ڈیزائن بنانے کے لیے اسکرولنگ کو قابل بناتا ہے۔ اس مضمون نے دکھایا ہے کہ کس طرح مواد کو بہنے سے روکا جائے اور CSS کا استعمال کرتے ہوئے اسکرولنگ کو کیسے فعال کیا جائے۔
اس کے بعد، میز کو والدین کے ساتھ لپیٹیں '
.overflow {
چوڑائی : 200px ;
اونچائی : 200px ;
overflow-x : آٹو ;
overflow-y : آٹو ;
اسکرول سلوک : ہموار ;
}
نتیجہ