Home-theater-designers
অসীম স্ক্রোল ব্যবহারকারীদের পৃষ্ঠার নিচের দিকে যাওয়ার সাথে সাথে বিষয়বস্তুকে ক্রমাগত লোড করতে দেয়, প্রথাগত পৃষ্ঠায় ক্লিক-টু-লোড পদ্ধতির বিপরীতে। এই বৈশিষ্ট্যটি একটি মসৃণ অভিজ্ঞতা দিতে পারে, বিশেষ করে মোবাইল ডিভাইসে।
দিনের MUO ভিডিও কন্টেন্টের সাথে চালিয়ে যেতে স্ক্রোল করুন
প্লেইন HTML, CSS, এবং JavaScript ব্যবহার করে কীভাবে অসীম স্ক্রোল সেট আপ করবেন তা আবিষ্কার করুন।
ফ্রন্টএন্ড সেট আপ করা হচ্ছে
আপনার সামগ্রী প্রদর্শনের জন্য একটি মৌলিক HTML কাঠামো দিয়ে শুরু করুন। এখানে একটি উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1>
<div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
</div>
<script src="script.js"></script>
</body>
</html>
এই পৃষ্ঠাটিতে স্থানধারক চিত্রগুলির একটি সিরিজ রয়েছে এবং দুটি সংস্থানের উল্লেখ রয়েছে: একটি CSS ফাইল এবং একটি জাভাস্ক্রিপ্ট ফাইল৷
স্ক্রোলযোগ্য বিষয়বস্তুর জন্য CSS স্টাইলিং
একটি গ্রিডে স্থানধারক ইমেজ প্রদর্শন করতে, আপনার নিম্নলিখিত CSS যোগ করুন style.css ফাইল:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body {
font-family: Cambria, Times, "Times New Roman", serif;
}
h1 {
text-align: center;
font-size: 5rem;
padding: 2rem;
}
img {
width: 100%;
display: block;
}
.products__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.products__list > * {
width: calc(33% - 2rem);
}
.loading-indicator {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
background: #333;
padding: 1rem 2rem;
color: #fff;
border-radius: 10px;
transform: translateX(-50%);
}
এই মুহুর্তে, আপনার পৃষ্ঠাটি এইরকম হওয়া উচিত:
JS এর সাথে মূল বাস্তবায়ন
সম্পাদনা করুন script.js . অসীম স্ক্রোল বাস্তবায়নের জন্য, ব্যবহারকারী কখন কন্টেন্ট কন্টেইনার বা পৃষ্ঠার নীচে স্ক্রোল করেছে তা আপনাকে সনাক্ত করতে হবে।
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
তারপরে, আরও স্থানধারক ডেটা আনার জন্য একটি ফাংশন তৈরি করুন।
async function fetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
console.log(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
}
}
এই প্রকল্পের জন্য, আপনি থেকে API ব্যবহার করতে পারেন fakestoreapi .
স্ক্রলে আপনার ডেটা আনা হচ্ছে তা নিশ্চিত করতে, কনসোলটি দেখুন:
আপনি লক্ষ্য করবেন যে আপনার ডেটা স্ক্রলে একাধিকবার আনা হচ্ছে যা ডিভাইসের কার্যকারিতাকে ক্ষতিকারক কারণ হতে পারে। এটি প্রতিরোধ করতে, ডেটার একটি প্রাথমিক আনার অবস্থা তৈরি করুন:
let isFetching = false;
তারপরে, পূর্ববর্তী আনা শেষ হওয়ার পরে শুধুমাত্র ডেটা আনার জন্য আপনার আনা ফাংশন পরিবর্তন করুন।
xbox ওয়াইফাই এর সাথে সংযোগ করতে পারে না
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true; // Set the flag to true
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false; // Reset the flag to false
}
}
নতুন বিষয়বস্তু প্রদর্শন করা হচ্ছে
ব্যবহারকারী যখন পৃষ্ঠাটি নীচে স্ক্রোল করে তখন নতুন বিষয়বস্তু প্রদর্শন করতে, একটি ফাংশন তৈরি করুন যা প্যারেন্ট কন্টেনারে চিত্রগুলিকে যুক্ত করে।
প্রথমে, মূল উপাদান নির্বাচন করুন:
const productsList = document.querySelector(".products__list");
তারপর, বিষয়বস্তু যুক্ত করার জন্য একটি ফাংশন তৈরি করুন।
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement); // Append to productsList container
});
}
অবশেষে, আপনার আনয়ন ফাংশন পরিবর্তন করুন এবং সংযোজন ফাংশনে আনা ডেটা পাস করুন।
async function fetchMoreContent() {
if (isFetching) return;
isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false;
}
}
এবং এর সাথে, আপনার অসীম স্ক্রোল এখন কাজ করে।
অসীম স্ক্রল বর্ধিতকরণ
ব্যবহারকারীর অভিজ্ঞতা বাড়ানোর জন্য, আপনি নতুন সামগ্রী আনার সময় একটি লোডিং সূচক প্রদর্শন করতে পারেন। এই HTML যোগ করে শুরু করুন.
<h1 class="loading-indicator">Loading...</h1>
তারপর লোডিং উপাদান নির্বাচন করুন।
const loadingIndicator = document.querySelector(".loading-indicator");
অবশেষে, লোডিং সূচকের দৃশ্যমানতা টগল করতে দুটি ফাংশন তৈরি করুন।
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
তারপরে, ফেচ ফাংশনে এগুলি যুক্ত করুন।
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true;
showLoadingIndicator(); // Show loader
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
hideLoadingIndicator(); // Hide loader
isFetching = false;
}
}
যা দেয়:
অসীম স্ক্রোল জন্য ভাল অভ্যাস
অনুসরণ করার জন্য কিছু সেরা অনুশীলন অন্তর্ভুক্ত:
- একসাথে অনেকগুলো আইটেম আনবেন না। এটি ব্রাউজারকে অভিভূত করতে পারে এবং কর্মক্ষমতা হ্রাস করতে পারে।
- একটি স্ক্রোল ইভেন্ট সনাক্ত করার সাথে সাথে বিষয়বস্তু আনার পরিবর্তে, একটি debounce ফাংশন ব্যবহার করুন আনয়ন সামান্য বিলম্বিত. এটা পারে অতিরিক্ত নেটওয়ার্ক অনুরোধ প্রতিরোধ .
- সমস্ত ব্যবহারকারী অসীম স্ক্রোলিং পছন্দ করেন না। একটি বিকল্প প্রস্তাব একটি পেজিনেশন উপাদান ব্যবহার করুন যদি ইচ্ছা হয়।
- যদি লোড করার জন্য আর কোন সামগ্রী না থাকে, তবে ক্রমাগত আরও সামগ্রী আনার চেষ্টা না করে ব্যবহারকারীকে জানান৷
বিজোড় বিষয়বস্তু লোডিং আয়ত্ত করা
অসীম স্ক্রোলিং ব্যবহারকারীদের সহজে বিষয়বস্তু ব্রাউজ করতে দেয়, এবং মোবাইল ডিভাইস ব্যবহার করা লোকেদের জন্য এটি দুর্দান্ত। আপনি যদি এই নিবন্ধ থেকে টিপস এবং গুরুত্বপূর্ণ পরামর্শ ব্যবহার করেন, আপনি আপনার ওয়েবসাইটগুলিতে এই বৈশিষ্ট্যটি যোগ করতে পারেন।
ব্যবহারকারীরা যখন আপনার সাইট ব্যবহার করে তখন তারা কেমন অনুভব করে সে সম্পর্কে চিন্তা করতে ভুলবেন না। ব্যবহারকারী কী ঘটছে তা নিশ্চিত করতে অগ্রগতির চিহ্ন এবং ত্রুটি নোটের মতো জিনিসগুলি দেখান৷