اس مضمون میں ہم اسکرول بار کی دنیا میں غوطہ زن ہوں گے۔ میں جانتا ہوں، یہ زیادہ دلکش نہیں لگتا، لیکن مجھ پر بھروسہ کریں، ایک اچھی طرح سے ڈیزائن کیا گیا صفحہ ایک مماثل اسکرول بار کے ساتھ مل جاتا ہے۔ پرانے زمانے کا کروم اسکرول بار اتنا فٹ نہیں بیٹھتا ہے۔
ہم اسکرول بار کی نفاست پسند تفصیلات پر غور کریں گے اور پھر کچھ عمدہ مثالیں دیکھیں گے۔
اسکرول بار کے اجزاء
یہ واقعی ایک ریفریشر سے زیادہ ہے۔ وہاں پر ایک CSS-Tricks پر یہیں پوسٹس کا ایک گروپ جب سی ایس ایس میں اپنی مرضی کے مطابق اسکرول بار اسٹائلنگ کی بات آتی ہے تو اس کی گہرائی میں جاتی ہے۔
اسکرول بار کو اسٹائل کرنے کے لیے آپ کو اسکرول بار کی اناٹومی سے واقف ہونا ضروری ہے۔ اس مثال پر ایک نظر ڈالیں:
یہاں ذہن میں رکھنے کے لئے دو اہم اجزاء ہیں:
- ۔ ٹریک بار کے نیچے پس منظر ہے۔
- ۔ انگوٹھے وہ حصہ ہے جسے صارف کلک کرتا ہے اور گھسیٹتا ہے۔
ہم وینڈر-پریفکسڈ کا استعمال کرتے ہوئے مکمل اسکرول بار کی خصوصیات کو تبدیل کر سکتے ہیں۔::-webkit-scrollbar سلیکٹر ہم اسکرول بار کو ایک مقررہ چوڑائی، پس منظر کا رنگ، گول کونے… بہت سی چیزیں دے سکتے ہیں! اگر ہم کسی صفحہ کے مرکزی اسکرول بار کو اپنی مرضی کے مطابق کر رہے ہیں، تو ہم استعمال کر سکتے ہیں۔ ::-webkit-scrollbar براہ راست HTML عنصر پر:
html::-webkit-scrollbar {
/* Style away! */
}اگر ہم اسکرول باکس کو اپنی مرضی کے مطابق بنا رہے ہیں تو اس کا نتیجہ ہے۔ overflow: scroll، پھر ہم استعمال کر سکتے ہیں ::-webkit-scrollbar اس کے بجائے اس عنصر پر:
.element::-webkit-scrollbar {
/* Style away! */
}یہاں ایک فوری مثال ہے جو HTML عنصر کے اسکرول بار کو اس طرح بناتی ہے کہ یہ سرخ پس منظر کے ساتھ چوڑا ہو:
اگر ہم صرف اسکرول بار کے انگوٹھے یا ٹریک کو تبدیل کرنا چاہتے ہیں تو کیا ہوگا؟ آپ نے اندازہ لگایا ہے - ہمارے پاس ان دونوں کے لیے خصوصی سابقہ چھدم عناصر ہیں: ::-webkit-scrollbar-thumb اور ::-webkit-scrollbar-trackبالترتیب یہاں ایک خیال ہے کہ جب ہم ان تمام چیزوں کو ایک ساتھ رکھتے ہیں تو کیا ممکن ہے:
برش کرنا کافی ہے! میں آپ کو حسب ضرورت اسکرول بار اسٹائلنگ کی تین ڈگریاں دکھانا چاہتا ہوں، پھر تحریک کے لیے پورے ویب سے کھینچی گئی مثالوں کا ایک بڑا ol' شوکیس کھولیں۔
سادہ اور بہترین اسکرول بار
حسب ضرورت اسکرول بار اب بھی کم سے کم ہو سکتا ہے۔ میں نے مثالوں کے ایک گروپ کو اکٹھا کیا ہے جو ظاہری طور پر ظاہری شکل کو تبدیل کرتی ہے، چاہے انگوٹھے یا ٹریک میں ہلکی سی رنگ کی تبدیلی کے ساتھ، یا پس منظر میں کچھ ہلکے اسٹائل کے ساتھ۔
جیسا کہ آپ دیکھ سکتے ہیں، جب اسکرول بار اسٹائلنگ کی بات آتی ہے تو ہمیں پریشان ہونے کی ضرورت نہیں ہے۔ کبھی کبھی ایک باریک تبدیلی صرف اسکرول بار کے ساتھ صارف کے مجموعی تجربے کو بڑھانے کے لیے ہوتی ہے جو کہ مجموعی تھیم سے میل کھاتا ہے۔
ٹھنڈی آنکھ کو پکڑنے والے اسکرول بار
لیکن آئیے اسے تسلیم کریں: تھوڑا سا اوور بورڈ جانا اور کچھ تخلیقی صلاحیتوں کا استعمال کرنا مزہ آتا ہے۔ یہاں کچھ عجیب اور منفرد اسکرول بار ہیں جو کچھ معاملات میں "بہت زیادہ" ہوسکتے ہیں، لیکن وہ یقینی طور پر دلکش ہیں۔
ایک اور…
ہم انگوٹھے کے لیے ٹرین میں گھومنے کے لیے اسکرول بار اور ٹریک کے لیے ٹریک کے بارے میں کیا خیال ہے!
