কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি এলিমেন্টে স্ক্রোল করবেন

ওয়েব পৃষ্ঠাগুলির মাধ্যমে সার্ফিং করার সময়, একটি উপাদানে স্ক্রোল করা ব্যবহারকারীকে দীর্ঘ সময়ের জন্য তাদের মনোযোগ আকর্ষণ করে ফোকাস রাখে। এই কার্যকারিতা প্রয়োগ করা যেতে পারে যখন একজন ব্যবহারকারীকে শুধুমাত্র একটি ক্লিক ব্যবহার করে স্ক্রোল করতে হয় বা, অটোমেশন পরীক্ষার ক্ষেত্রে, পৃষ্ঠার নীচের অংশে যোগ করা বিষয়বস্তু অবিলম্বে পরীক্ষা করতে। এই ধরনের পরিস্থিতিতে, জাভাস্ক্রিপ্টের একটি উপাদানে স্ক্রোল করলে ব্যবহারকারীর খুব বেশি ইন্টারঅ্যাকশন ছাড়াই এক ক্লিকে প্রয়োগ করার কার্যকারিতা যোগ হয় এবং সময় বাঁচে।

এই ম্যানুয়াল আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে একটি উপাদানে স্ক্রোল করতে গাইড করবে।

কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি উপাদানে স্ক্রোল করবেন?

জাভাস্ক্রিপ্ট ব্যবহার করে একটি উপাদানে স্ক্রোল করতে, আপনি ব্যবহার করতে পারেন:

• • ' scrollIntoView() 'পদ্ধতি
  • ' স্ক্রোল() 'পদ্ধতি
  • ' ScrollTo() 'পদ্ধতি

উল্লিখিত পন্থাগুলো একে একে তুলে ধরা হবে!

পদ্ধতি 1: scrollIntoView() পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টের একটি উপাদানে স্ক্রোল করুন

দ্য ' scrollIntoView() ” পদ্ধতি ডকুমেন্ট অবজেক্ট মডেল (DOM) এর দৃশ্যমান এলাকায় একটি উপাদান স্ক্রোল করে। এই পদ্ধতিটি নির্দিষ্ট এইচটিএমএল পেতে এবং অনক্লিক ইভেন্টের সাহায্যে নির্দিষ্ট পদ্ধতিটি প্রয়োগ করতে প্রয়োগ করা যেতে পারে।

বাক্য গঠন

প্রদত্ত সিনট্যাক্সে, ' সারিবদ্ধ ” সারিবদ্ধ প্রকার নির্দেশ করে।

উদাহরণ

নিম্নলিখিত উদাহরণে, ' ব্যবহার করে নিম্নলিখিত শিরোনাম যোগ করুন

ট্যাগ:

< h2 > উপাদানটিতে স্ক্রোল করতে বোতামটি ক্লিক করুন। h2 >

এখন, একটি 'সহ একটি বোতাম তৈরি করুন অনক্লিক 'ইভেন্ট ফাংশন আহ্বানকারী' স্ক্রোল এলিমেন্ট() :

< বোতাম অনক্লিক = 'স্ক্রোল এলিমেন্ট()' > স্ক্রোল এলিমেন্ট বোতাম >
< br >

এর পরে, স্ক্রোল করার জন্য চিত্রের উত্স এবং এর আইডি নির্দিষ্ট করুন:

< ইমেজ src = 'পর্যালোচনা. PNG' আইডি = 'div' >

অবশেষে, 'নামক একটি ফাংশন সংজ্ঞায়িত করুন স্ক্রোল এলিমেন্ট() যা ' ব্যবহার করে প্রয়োজনীয় উপাদান আনবে document.getElementById() ” পদ্ধতি এবং চিত্রটি স্ক্রোল করার জন্য এটিতে scrollIntoView() পদ্ধতি প্রয়োগ করুন:

ফাংশন scrollElement ( ) {
var উপাদান = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}

CSS কোড

CSS কোডে, চিত্র আইডি উল্লেখ করে চিত্রের আকার সামঞ্জস্য করার জন্য নিম্নলিখিত মাত্রাগুলি প্রয়োগ করুন “ div ”:

#div{
উচ্চতা: 800px;
প্রস্থ: 1200px;
overflow: স্বয়ংক্রিয়;
}

সংশ্লিষ্ট আউটপুট হবে:

পদ্ধতি 2: window.scroll() পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টের একটি এলিমেন্টে স্ক্রোল করুন

দ্য ' window.scroll() ” পদ্ধতি নথিতে স্থানাঙ্কের মান অনুযায়ী উইন্ডোটিকে স্ক্রোল করে। এই পদ্ধতিটি ইমেজ আইডি আনতে, একটি ফাংশন ব্যবহার করে এর স্থানাঙ্ক সেট করতে এবং নির্দিষ্ট চিত্রটি স্ক্রোল করতে প্রয়োগ করা যেতে পারে।

বাক্য গঠন

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

উপরের সিনট্যাক্সে, ' x-coord 'এক্স স্থানাঙ্ক বোঝায়, এবং' y-coord ” Y স্থানাঙ্ক নির্দেশ করে।

নিম্নলিখিত উদাহরণটি বর্ণিত ধারণাটি ব্যাখ্যা করে।

উদাহরণ

শিরোনাম যোগ করতে একই পদক্ষেপগুলি পুনরাবৃত্তি করুন, একটি বোতাম তৈরি করুন, অনক্লিক ইভেন্টটি প্রয়োগ করুন এবং এর আইডি সহ চিত্রের উত্সটি নির্দিষ্ট করুন:

< h2 > উপাদানটিতে স্ক্রোল করতে বোতামটি ক্লিক করুন। h2 >
< বোতাম অনক্লিক = 'স্ক্রোল এলিমেন্ট()' > স্ক্রোল এলিমেন্ট বোতাম >
< br >
< ইমেজ src = 'image.PNG' আইডি = 'div' >

এর পরে, 'নামক একটি ফাংশন সংজ্ঞায়িত করুন স্ক্রোল এলিমেন্ট() ” এখানে, আমরা ' ব্যবহার করে স্থানাঙ্কগুলি সামঞ্জস্য করব window.scroll() '' নামের ফাংশন অ্যাক্সেস করে পদ্ধতি অবস্থান() 'এবং এটি আনা চিত্র উপাদানে প্রয়োগ করা হচ্ছে:

ফাংশন scrollElement ( ) {
window.scroll ( 0 , অবস্থান ( document.getElementById ( 'div' ) ) ) ;
}

এর পরে, 'নামক একটি ফাংশন সংজ্ঞায়িত করুন অবস্থান() একটি পরিবর্তনশীল বস্তুকে এর আর্গুমেন্ট হিসাবে গ্রহণ করা। এছাড়াও, প্রয়োগ করুন ' offsetParent ” সম্পত্তি, যা স্থির অবস্থান নেই এমন নিকটতম পূর্বপুরুষকে অ্যাক্সেস করবে এবং এটি ফেরত দেবে। তারপর, 'এর সাহায্যে প্রারম্ভিক বর্তমান শীর্ষ মান বৃদ্ধি করুন অফসেটটপ ' সম্পত্তি যা পিতামাতার (অফসেটপ্যারেন্ট) সাপেক্ষে শীর্ষ অবস্থান ফিরিয়ে দেবে এবং 'এর মান ফিরিয়ে দেবে বর্তমান শীর্ষ 'যখন যোগ করা শর্তটিকে সত্য হিসাবে মূল্যায়ন করা হয়:

ফাংশন অবস্থান ( বস্তু ) {
যেখানে কারেন্টটপ = 0 ;
যদি ( obj.offsetParent ) {
করতে {
currenttop += obj.offsetTop;
} যখন ( ( obj = obj.offsetParent ) ) ;
ফিরে [ বর্তমান শীর্ষ ] ;
}
}

অবশেষে, আপনার প্রয়োজনীয়তা অনুযায়ী তৈরি পাত্রে স্টাইল করুন:

#div{
উচ্চতা: 1000px;
প্রস্থ: 1000px;
overflow: স্বয়ংক্রিয়;
}

আউটপুট

পদ্ধতি 3: scrollTo() পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টের একটি উপাদানে স্ক্রোল করুন

দ্য ' ScrollTo() ” পদ্ধতি নির্দিষ্ট নথিকে নির্ধারিত স্থানাঙ্কে স্ক্রোল করে। এই পদ্ধতিটি একইভাবে আইডি ব্যবহার করে এবং DOM-এ নির্দিষ্ট চিত্রটি স্ক্রোল করার জন্য প্রয়োজনীয় কার্যকারিতা সম্পাদন করে উপাদান পেতে প্রয়োগ করা যেতে পারে।

বাক্য গঠন

window.scrollTo ( x এবং y )

এখানে, ' এক্স ' এবং ' Y ” x এবং y স্থানাঙ্কের দিকে নির্দেশ করুন।

নিম্নলিখিত উদাহরণ একটি কটাক্ষপাত আছে.

উদাহরণ

প্রথমে, একটি শিরোনাম, একটি অনক্লিক ইভেন্ট সহ বোতাম এবং চিত্র যুক্ত করার জন্য উপরে আলোচিত পদক্ষেপগুলি পুনরাবৃত্তি করুন:

< h2 > উপাদানটিতে স্ক্রোল করতে বোতামটি ক্লিক করুন। h2 >
< বোতাম অনক্লিক = 'স্ক্রোল এলিমেন্ট()' > স্ক্রোল এলিমেন্ট বোতাম >
< br >
< img src = 'ছবি.জেপিজি' আইডি = 'div' >

এর পরে, 'নামক একটি ফাংশন সংজ্ঞায়িত করুন স্ক্রোল এলিমেন্ট() ” এবং scrollTo() পদ্ধতিতে Position() পদ্ধতি ব্যবহার করে স্ক্রোল সেট করুন:

ফাংশন scrollElement ( ) {
window.scrollTo ( 0 , অবস্থান ( document.getElementById ( 'div' ) ) ) ;
}

সবশেষে, Position() নামের একটি ফাংশন সংজ্ঞায়িত করুন এবং একইভাবে নির্দিষ্ট চিত্রের স্থানাঙ্ক সেট করার জন্য উপরে আলোচিত পদক্ষেপগুলি প্রয়োগ করুন:

ফাংশন অবস্থান ( বস্তু ) {
যেখানে কারেন্টটপ = 0 ;
যদি ( obj.offsetParent ) {
করতে {
currenttop += obj.offsetTop;
} যখন ( ( obj = obj.offsetParent ) ) ;
প্রত্যাবর্তন [ বর্তমান শীর্ষ ] ;
}
}

আউটপুট

আমরা জাভাস্ক্রিপ্ট ব্যবহার করে একটি উপাদানে স্ক্রোল করার সব সুবিধাজনক পদ্ধতি নিয়ে আলোচনা করেছি।

উপসংহার

জাভাস্ক্রিপ্টে একটি উপাদানে স্ক্রোল করতে, ব্যবহার করুন “ scrollIntoView() উপাদানটি অ্যাক্সেস করার এবং নির্দিষ্ট কার্যকারিতা প্রয়োগ করার পদ্ধতি, ' window.scroll() ' উপাদান আনার পদ্ধতি, একটি ফাংশন ব্যবহার করে এর স্থানাঙ্ক সেট করুন এবং চিত্রটি স্ক্রোল করুন, বা ব্যবহার করুন ' ScrollTo() উপাদান আনার জন্য এবং সেই অনুযায়ী স্ক্রোল করার জন্য পদ্ধতি। এই ব্লগটি জাভাস্ক্রিপ্ট ব্যবহার করে একটি উপাদানে স্ক্রোল করার ধারণাটি প্রদর্শন করেছে।