CSS ব্যবহার করে স্ক্রলবার লুকানোর জন্য, আমরা বিভিন্ন পদ্ধতি বুঝতে পারব। স্ক্রলবার হল ওয়েব ব্রাউজারগুলির মূল উপাদান যা ব্যবহারকারীদের দর্শনযোগ্য উইন্ডোর চেয়ে বড় বিষয়বস্তু এলাকায় নেভিগেট করতে দেয়। overflow ব্যবহার করে স্ক্রলিং কার্যকারিতা বজায় রাখার সময় আমরা স্ক্রলবারগুলি লুকিয়ে রাখতে পারি সম্পত্তি।
সিনট্যাক্স
selector {
overflow-x: value;
overflow-y: value;
}
/* Or shorthand */
selector {
overflow: value;
}
সম্ভাব্য মান
visible বিষয়বস্তু ক্লিপ করা হয়নি, উপাদানের বাইরে রেন্ডার হতে পারেhidden কন্টেন্ট ক্লিপ করা হয়েছে এবং স্ক্রলবার লুকানো আছেscroll বিষয়বস্তু ক্লিপ করা হয়েছে কিন্তু স্ক্রলবার সবসময় দৃশ্যমান হয়auto কন্টেন্ট ওভারফ্লো হলেই স্ক্রলবার দেখা যায় পদ্ধতি 1:উল্লম্ব স্ক্রলবার লুকানো
অনুভূমিক স্ক্রলিং সক্ষম রাখার সময় উল্লম্ব স্ক্রলবার লুকানোর জন্য, overflow-y: hidden সেট করুন এবং overflow-x: scroll
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-y: hidden;
overflow-x: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
white-space: nowrap;
width: 500px;
background-color: #f0f8ff;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
This is a very long line of text that will extend beyond the container width and require horizontal scrolling to view completely.
</div>
<p>More content here that would normally cause vertical scrolling.</p>
<p>But the vertical scrollbar is hidden.</p>
</div>
</body>
</html>
A bordered container with horizontal scrollbar visible at the bottom, but no vertical scrollbar. The content extends horizontally and can be scrolled left/right.
পদ্ধতি 2:অনুভূমিক স্ক্রলবার লুকানো
উল্লম্ব স্ক্রোলিং সক্ষম রাখার সময় অনুভূমিক স্ক্রলবার লুকানোর জন্য, overflow-x: hidden সেট করুন এবং overflow-y: scroll
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #fff3cd;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This is paragraph one with normal text content.</p>
<p>This is paragraph two with more content.</p>
<p>This is paragraph three adding even more text.</p>
<p>This is paragraph four to create overflow.</p>
<p>This is paragraph five for vertical scrolling.</p>
</div>
</div>
</body>
</html>
A bordered container with vertical scrollbar visible on the right side, but no horizontal scrollbar. The content extends vertically and can be scrolled up/down.
পদ্ধতি 3:উভয় স্ক্রলবার লুকানো
অনুভূমিক এবং উল্লম্ব উভয় স্ক্রলবার সম্পূর্ণরূপে আড়াল করতে, উভয় overflow-x সেট করুন এবং overflow-y hidden-এ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow: hidden;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #d1ecf1;
width: 500px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This content extends both horizontally and vertically beyond the container boundaries.</p>
<p>However, no scrollbars are visible, so the overflowing content is simply clipped.</p>
<p>Users cannot scroll to see the hidden content.</p>
</div>
</div>
</body>
</html>
A bordered container with no visible scrollbars. Content that extends beyond the container boundaries is clipped and hidden from view.
উপসংহার
CSS overflow ব্যবহার করে স্ক্রলবার লুকানো বৈশিষ্ট্য ক্লিনার ইন্টারফেস তৈরি করে। overflow: hidden ব্যবহার করুন সম্পূর্ণরূপে স্ক্রলবার লুকানোর জন্য, অথবা overflow-x দিয়ে অনুভূমিক এবং উল্লম্ব স্ক্রোলিংকে বেছে বেছে নিয়ন্ত্রণ করুন এবং overflow-y বৈশিষ্ট্য।
