جاوا اسکرپٹ کا استعمال کرتے ہوئے کسی عنصر تک کیسے سکرول کریں۔

ویب صفحات کے ذریعے سرفنگ کرتے وقت، کسی عنصر تک سکرول کرنے سے صارف کی توجہ طویل عرصے تک اپنی طرف متوجہ رہتی ہے۔ یہ فعالیت اس وقت لاگو کی جا سکتی ہے جب کسی صارف کو صرف ایک کلک کا استعمال کرتے ہوئے سکرول کرنے کی ضرورت ہو یا آٹومیشن ٹیسٹنگ کی صورت میں صفحہ کے نچلے حصے میں شامل مواد کو فوری طور پر چیک کرنے کے لیے۔ ایسے منظرناموں میں، JavaScript میں کسی عنصر تک سکرول کرنے سے صارف کے زیادہ تعامل کے بغیر ایک کلک کے ساتھ لاگو ہونے کی فعالیت میں اضافہ ہوتا ہے اور وقت کی بچت ہوتی ہے۔

یہ ہدایت نامہ جاوا اسکرپٹ کا استعمال کرتے ہوئے کسی عنصر تک سکرول کرنے میں آپ کی رہنمائی کرے گا۔

جاوا اسکرپٹ کا استعمال کرتے ہوئے کسی عنصر تک کیسے سکرول کریں؟

جاوا اسکرپٹ کا استعمال کرتے ہوئے کسی عنصر تک سکرول کرنے کے لیے، آپ استعمال کر سکتے ہیں:

• • ' scrollIntoView() 'طریقہ
  • ' سکرول() 'طریقہ
  • ' اسکرول ٹو() 'طریقہ

مذکور طریقوں کو ایک ایک کرکے بیان کیا جائے گا!

طریقہ 1: scrollIntoView() طریقہ استعمال کرتے ہوئے جاوا اسکرپٹ میں ایک عنصر تک سکرول کریں

' scrollIntoView() ' طریقہ ایک عنصر کو دستاویز آبجیکٹ ماڈل (DOM) کے مرئی علاقے میں اسکرول کرتا ہے۔ یہ طریقہ مخصوص ایچ ٹی ایم ایل حاصل کرنے کے لیے لاگو کیا جا سکتا ہے اور آن کلک ایونٹ کی مدد سے مخصوص طریقہ کو اس پر لاگو کیا جا سکتا ہے۔

نحو

دیئے گئے نحو میں، ' سیدھ میں لانا ' سیدھ کی قسم کی نشاندہی کرتا ہے۔

مثال

مندرجہ ذیل مثال میں، 'کا استعمال کرتے ہوئے درج ذیل سرخی شامل کریں

ٹیگ:

< h2 > عنصر تک سکرول کرنے کے لیے بٹن پر کلک کریں۔ h2 >

اب، ' کے ساتھ ایک بٹن بنائیں کلک پر ' تقریب کی دعوت دینے والا تقریب ' scrollElement() :

< بٹن کلک پر = 'scrollElement()' > اسکرول عنصر بٹن >
< بی آر >

اس کے بعد، اسکرول کرنے کے لیے تصویر کا ماخذ اور اس کی آئی ڈی کی وضاحت کریں:

< تصویر src = 'review.PNG' آئی ڈی = 'div' >

آخر میں، ایک فنکشن کی وضاحت کریں جس کا نام ' scrollElement() جو 'کا استعمال کرتے ہوئے مطلوبہ عنصر کو حاصل کرے گا۔ document.getElementById() ” طریقہ اور اس پر scrollIntoView() طریقہ کا اطلاق کریں تاکہ تصویر کو اسکرول کریں:

فنکشن scrollElement ( ) {
var عنصر = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}

سی ایس ایس کوڈ

سی ایس ایس کوڈ میں، امیج آئی ڈی کا حوالہ دے کر تصویر کے سائز کو ایڈجسٹ کرنے کے لیے درج ذیل ڈائمینشنز کا اطلاق کریں۔ div ”:

#div{
اونچائی: 800px؛
چوڑائی: 1200px؛
overflow: auto;
}

متعلقہ آؤٹ پٹ ہو گا:

طریقہ 2: window.scroll() طریقہ استعمال کرتے ہوئے جاوا اسکرپٹ میں کسی عنصر تک سکرول کریں۔

' window.scroll() ' طریقہ دستاویز میں کوآرڈینیٹ اقدار کے مطابق ونڈو کو اسکرول کرتا ہے۔ یہ طریقہ امیج آئی ڈی کو حاصل کرنے، فنکشن کا استعمال کرتے ہوئے اس کے نقاط کو سیٹ کرنے اور مخصوص تصویر کو سکرول کرنے کے لیے لاگو کیا جا سکتا ہے۔

نحو

window.scroll ( x-coord، y-coord )

مندرجہ بالا نحو میں، ' x-coord 'X کوآرڈینیٹ سے مراد ہے، اور' y-coord ' Y کوآرڈینیٹس کی نشاندہی کرتا ہے۔

درج ذیل مثال بیان کردہ تصور کی وضاحت کرتی ہے۔

مثال

سرخی شامل کرنے کے لیے انہی اقدامات کو دہرائیں، ایک بٹن بنائیں، آن کلک ایونٹ کو لاگو کریں اور تصویر کا ذریعہ اس کی آئی ڈی کے ساتھ بتائیں:

< h2 > عنصر تک سکرول کرنے کے لیے بٹن پر کلک کریں۔ h2 >
< بٹن کلک پر = 'scrollElement()' > اسکرول عنصر بٹن >
< بی آر >
< تصویر src = 'image.PNG' آئی ڈی = 'div' >

اگلا، 'نامی ایک فنکشن کی وضاحت کریں scrollElement() ' یہاں، ہم 'کا استعمال کرتے ہوئے نقاط کو ایڈجسٹ کریں گے window.scroll() 'نامی فنکشن تک رسائی حاصل کرنے کا طریقہ' پوزیشن () اور اسے حاصل کردہ تصویری عنصر پر لاگو کرنا:

فنکشن scrollElement ( ) {
window.scroll ( 0 ، پوزیشن ( document.getElementById ( 'div' ) ) ) ;
}

اس کے بعد، ایک فنکشن کی وضاحت کریں جس کا نام ' پوزیشن () ایک متغیر آبجیکٹ کو اس کی دلیل کے طور پر لینا۔ اس کے علاوہ، لاگو کریں ' آفسیٹ پیرنٹ ” جائیداد، جو قریب ترین آباؤ اجداد تک رسائی حاصل کرے گی جس کی کوئی مستحکم حیثیت نہیں ہے اور اسے واپس کر دے گی۔ پھر، 'کی مدد سے ابتدائی موجودہ ٹاپ ویلیو میں اضافہ کریں آفسیٹ ٹاپ ' جائیداد جو والدین (offsetParent) کے حوالے سے سب سے اوپر کی پوزیشن واپس کرے گی اور 'کی قدر واپس کرے گی موجودہ اوپر ' جب اضافی حالت کا صحیح کے طور پر جائزہ لیا جاتا ہے:

فنکشن پوزیشن ( اعتراض ) {
جہاں کرنٹ ٹاپ = 0 ;
اگر ( obj.offsetParent ) {
کیا {
currenttop += obj.offsetTop؛
} جبکہ ( ( obj = obj.offsetParent ) ) ;
واپسی [ کرنٹ ٹاپ ] ;
}
}

آخر میں، اپنی ضروریات کے مطابق بنائے گئے کنٹینر کو اسٹائل کریں:

#div{
اونچائی: 1000px؛
چوڑائی: 1000px؛
overflow: auto;
}

آؤٹ پٹ

طریقہ 3: scrollTo() طریقہ استعمال کرتے ہوئے جاوا اسکرپٹ میں کسی عنصر تک سکرول کریں۔

' اسکرول ٹو() ” طریقہ مخصوص دستاویز کو تفویض کردہ نقاط پر اسکرول کرتا ہے۔ یہ طریقہ اسی طرح عنصر کو حاصل کرنے کے لیے اس کی id استعمال کرکے اور DOM پر مخصوص تصویر کو اسکرول کرنے کے لیے مطلوبہ فعالیت کو انجام دے کر لاگو کیا جا سکتا ہے۔

نحو

window.scrollTo ( x اور y )

یہاں، ' ایکس 'اور' Y 'x اور y کوآرڈینیٹ کی طرف اشارہ کریں۔

درج ذیل مثال پر ایک نظر ڈالیں۔

مثال

سب سے پہلے، مندرجہ ذیل کے طور پر ایک سرخی، بٹن، ایک آن کلک ایونٹ کے ساتھ بٹن، اور تصویر شامل کرنے کے لیے اوپر بتائے گئے اقدامات کو دہرائیں:

< h2 > عنصر تک سکرول کرنے کے لیے بٹن پر کلک کریں۔ h2 >
< بٹن کلک پر = 'scrollElement()' > اسکرول عنصر بٹن >
< بی آر >
< img src = 'image.JPG' آئی ڈی = 'div' >

اگلا، 'نامی ایک فنکشن کی وضاحت کریں scrollElement() اور scrollTo() طریقہ میں Position() طریقہ استعمال کرکے اسکرول کو سیٹ کریں:

فنکشن scrollElement ( ) {
window.scrollTo ( 0 ، پوزیشن ( document.getElementById ( 'div' ) ) ) ;
}

آخر میں، Position() نامی فنکشن کی وضاحت کریں اور اسی طرح مخصوص تصویر کے نقاط کو ترتیب دینے کے لیے مذکورہ بالا زیر بحث اقدامات کا اطلاق کریں:

فنکشن پوزیشن ( اعتراض ) {
جہاں کرنٹ ٹاپ = 0 ;
اگر ( obj.offsetParent ) {
کیا {
currenttop += obj.offsetTop؛
} جبکہ ( ( obj = obj.offsetParent ) ) ;
واپسی [ کرنٹ ٹاپ ] ;
}
}

آؤٹ پٹ

ہم نے جاوا اسکرپٹ کا استعمال کرتے ہوئے کسی عنصر تک سکرول کرنے کے تمام آسان طریقوں پر تبادلہ خیال کیا ہے۔

نتیجہ

جاوا اسکرپٹ میں کسی عنصر تک سکرول کرنے کے لیے، ' scrollIntoView() عنصر تک رسائی حاصل کرنے اور مخصوص فعالیت کو لاگو کرنے کا طریقہ، ' window.scroll() عنصر کو بازیافت کرنے کا طریقہ، فنکشن کا استعمال کرتے ہوئے اس کے نقاط مقرر کریں، اور تصویر کو اسکرول کریں، یا استعمال کریں۔ اسکرول ٹو() عنصر کو لانے اور اس کے مطابق اسکرول کرنے کا طریقہ۔ اس بلاگ نے جاوا اسکرپٹ کا استعمال کرتے ہوئے کسی عنصر تک سکرول کرنے کے تصور کا مظاہرہ کیا۔