سکرولنگ صارفین کو ویب صفحات/لمبی دستاویزات کو بائیں اور دائیں یا اوپر اور نیچے دیکھنے کی اجازت دیتی ہے۔ یہ مواد کے لحاظ سے افقی اور عمودی اسکرول بارز کے اضافے سے انجام دیا جا سکتا ہے۔ اسکرول بار کے طول و عرض جیسے اونچائی اور چوڑائی پہلے سے طے شدہ ہیں۔ تاہم، ان کو ان کے متعلقہ جاوا اسکرپٹ طریقوں کی مدد سے اپنی مرضی کے مطابق بنایا جا سکتا ہے۔ ایک بار جب انہیں دستاویز میں شامل یا سیٹ کیا جا سکتا ہے، صارف بلٹ ان کا استعمال کرتے ہوئے آسانی سے ان کی شناخت کر سکتا ہے۔ سکرول ٹاپ() '، اور ' بائیں سکرول () 'طریقے.
یہ پوسٹ jQuery میں 'scrollLeft()' طریقہ کار کے مقصد اور فعالیت کی وضاحت کرتی ہے۔
jQuery میں 'scrollLeft()' طریقہ کیا ہے؟
' بائیں سکرول () ” طریقہ خاص طور پر افقی اسکرول بار کے لیے ڈیزائن کیا گیا ہے تاکہ پکسلز میں اس کی پوزیشن کو سیٹ اور بازیافت کیا جا سکے۔ یہ منتخب کردہ HTML عنصر اسکرول بار پوزیشن کا حساب لگاتا ہے۔ یہ زیادہ تر div، کنٹینر، اور سیکشن عناصر پر لاگو ہوتا ہے۔
نحو (افقی اسکرول بار کی پوزیشن سیٹ کریں)
$ ( سلیکٹر ) .اسکرول بائیں ( پوزیشن )
مندرجہ بالا نحو انٹیجر ویلیو کو بطور لیتا ہے ' پوزیشن ٹارگٹڈ سلیکٹر کی افقی اسکرول بار پوزیشن سیٹ کرنے کے لیے دلیل۔
نحو (افقی اسکرول بار پوزیشن حاصل کریں)
$ ( سلیکٹر ) .اسکرول بائیں ( )
یہ نحو سلیکٹر کی 'پوزیشن' آرگیومنٹ ویلیو کو پکسلز میں لوٹاتا ہے۔
آئیے متعین طریقہ کو عملی طور پر استعمال کریں۔
HTML کوڈ
پہلے، بیان کردہ HTML کوڈ پر ایک نظر ڈالیں:
< سیکشن انداز = 'اونچائی: 150px؛ چوڑائی: 200px؛ مارجن: آٹو؛ بارڈر: 2px ٹھوس سیاہ؛ اوور فلو: آٹو؛سفید جگہ: Nowrap؛' >
< h2 > Linuxhint میں خوش آمدید ! h2 >
سیکشن >
< بٹن > پوزیشن سیٹ کریں۔ بٹن >
کوڈ کی اوپر کی لائنوں میں:
- ' <سیکشن> ٹیگ میں HTML دستاویز کے اندر ایک سیکشن ہوتا ہے جسے 'سٹائل' وصف کی مدد سے اپنی مرضی کے مطابق بنایا گیا ہے۔
- بنائے گئے حصے کے اندر، ' ٹیگ ذیلی سرخی کی وضاحت کرتا ہے۔
- آخر میں، ' <بٹن> ” ٹیگ ایک بٹن جوڑتا ہے۔
نوٹ: اس پوسٹ کی تمام مثالوں میں دیئے گئے HTML کوڈ کی پیروی کریں۔
مثال 1: اسکرول بار (افقی) پوزیشن سیٹ کرنے کے لیے 'اسکرول لیفٹ()' طریقہ استعمال کرنا
یہ مثال اسکرول بار (افقی) کو مخصوص پوزیشن پر سیٹ کرنے کے لیے 'scrollLeft()' طریقہ استعمال کرتی ہے۔
jQuery کوڈ
دیئے گئے jQuery کوڈ پر عمل کریں:
< سکرپٹ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' >> سکرپٹ >< سکرپٹ >
$ ( دستاویز ) .تیار ( فنکشن ( ) {
$ ( 'بٹن' ) کلک کریں۔ ( فنکشن ( ) {
$ ( 'سیکشن' ) .اسکرول بائیں ( پچاس ) ;
} ) ;
} ) ;
سکرپٹ >
اس کوڈ کے ٹکڑوں میں:
- سب سے پہلے، jQuery لائبریری کے CDN راستے کی وضاحت کریں '