জাভাস্ক্রিপ্ট এবং সিএসএস দিয়ে কীভাবে একটি পৃষ্ঠার নীচে স্ক্রোল করা যায়

জাভাস্ক্রিপ্ট এবং সামান্য সিএসএস সহ ব্যবহারকারীকে কীভাবে মসৃণভাবে একটি দীর্ঘ ওয়েব পৃষ্ঠার নীচে স্ক্রোল করতে হয় তা শিখুন৷

আপনি যদি আপনার ব্যবহারকারীদের একটি পৃষ্ঠার নীচে মসৃণভাবে স্ক্রোল করার ক্ষমতা দিতে চান তবে আপনি scroll-behavior নামে একটি CSS বৈশিষ্ট্য ব্যবহার করতে পারেন। এবং scrollIntoView() নামে একটি জাভাস্ক্রিপ্ট পদ্ধতি .

আপনার নিম্নলিখিতগুলির প্রয়োজন হবে:

আপনার ব্রাউজারের ডানদিকে y-অক্ষ স্ক্রোল বার সক্রিয় করার জন্য যথেষ্ট সামগ্রী সহ একটি দীর্ঘ ওয়েব পৃষ্ঠা
একটি id সহ পৃষ্ঠার শীর্ষে একটি অ্যাঙ্কর উপাদান৷
একটি id সহ যেকোনো উপাদান পৃষ্ঠার নীচে
scroll-behavior CSS সম্পত্তি
scrollIntoView() জাভাস্ক্রিপ্ট সম্পত্তি

আসুন উদাহরণ দিয়ে শিখি!

HTML লেআউট উদাহরণ

আপনি শিখতে নিম্নলিখিত HTML মার্কআপ উদাহরণ ব্যবহার করতে পারেন (<p>....</p> dummy elements প্রতিস্থাপন করতে দ্বিধা বোধ করুন বাস্তব বিষয়বস্তু সহ):

<main>
  <p><a id="scroll-to-bottom">Scroll to bottom</a></p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p id="page-bottom">You have reached the bottom of this page!!</p>
</main>

লক্ষ্য করুন, আমাদের একটি অ্যাঙ্কর উপাদান <a> আছে উপরে scroll-to-bottom আইডি সহ , এবং page-bottom এর একটি আইডি সহ নীচে একটি উপাদান৷ .

CSS

মসৃণ স্ক্রলিং সক্রিয় করতে, আপনার CSS স্টাইলশীটে নিম্নলিখিত যোগ করুন:

html {
  scroll-behavior: smooth;
}

/* Layout */
main {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
}

#scroll-to-bottom {
  font-weight: bold;
  color: green;
}

দ্রষ্টব্য:স্ক্রোল জাদুটি আসে scroll-behavior: smooth; থেকে , উপরের CSS স্টাইলিং বাকি সম্পূর্ণরূপে প্রসাধনী.

জাভাস্ক্রিপ্ট

ব্যবহারকারীরা যখন নীচে স্ক্রোল করুন এ ক্লিক করুন তখন পৃষ্ঠার উপরের থেকে নীচের দিকে ব্যবহারকারীকে মসৃণভাবে স্ক্রোল করতে নিম্নলিখিত জাভাস্ক্রিপ্ট কোড যোগ করুন:

let scrollToBottom = document.querySelector("#scroll-to-bottom")
let pageBottom = document.querySelector("#page-bottom")

scrollToBottom.addEventListener("click", function() {
  pageBottom.scrollIntoView()
})

কিভাবে জাভাস্ক্রিপ্ট কোড কাজ করে

প্রথমে আমরা রেফারেন্স করার জন্য দুটি ভেরিয়েবল ঘোষণা করি scroll-to-bottom এবং page-bottom যথাক্রমে।
তারপর আমরা একটি ইভেন্ট লিসেনারকে scrollToBottom এর সাথে সংযুক্ত করি পরিবর্তনশীল এবং এটিকে বিশেষভাবে ক্লিক ইভেন্টগুলি শুনতে বলুন
function() { .. } এর ভিতরে আমরা scrollIntoView() সংযুক্ত করি পৃষ্ঠার নীচের উপাদান pageBottom এর পদ্ধতি .

এখন যখনই কেউ নীচে স্ক্রোল করুন এ ক্লিক করেন ফাংশনটি scrollIntoView চালায় পদ্ধতি এবং ব্যবহারকারীকে নীচের দিকে স্ক্রোল করে যেখানে page-bottom আইডি অবস্থিত।

দ্রষ্টব্য:যদি আপনি scroll-behavior: smooth; সরিয়ে দেন স্ক্রোলটি এখনও প্রযুক্তিগতভাবে সঞ্চালিত হবে, তবে এটি আকস্মিক হবে।

আপনি খাঁটি ভ্যানিলা জাভাস্ক্রিপ্ট (কোনও CSS বৈশিষ্ট্য নেই) দিয়ে মসৃণ স্ক্রলিং করতে পারেন তবে আপনি এই উদাহরণে যা দেখেন তার চেয়ে অনেক বেশি কোডের প্রয়োজন৷

সমস্ত ডেমো কোড দেখুন।

বাস্তব জীবনে নিচের দিকে স্ক্রোল করা কীভাবে কার্যকর?

একটি ব্যবহারের ক্ষেত্রে যা মনে আসে তা হল দর্শকদের দ্রুত একটি দীর্ঘ সামগ্রীর সারাংশে স্ক্রোল করার অনুমতি দেওয়া যা তাদের এই মুহূর্তে পড়ার সময় নাও থাকতে পারে।

ব্রাউজার সামঞ্জস্য

scroll-behavior CSS সম্পত্তি ইন্টারনেট এক্সপ্লোরার বা সাফারির সাথে সামঞ্জস্যপূর্ণ নয়। এই ব্রাউজারগুলির জন্য, আপনার একটি বিশুদ্ধ জাভাস্ক্রিপ্ট সমাধান প্রয়োজন।