CSS ব্যবহার করে স্ক্রোলবার হাইড করতে, আমরা বিভিন্ন পদ্ধতি বুঝব। স্ক্রোলবার ওয়েব ব্রাউজারের মূল কম্পোনেন্ট যা ব্যবহারকারীদের কন্টেন্ট এরিয়া নেভিগেট করতে দেয় যা ভিউয়েবল উইন্ডোর চেয়ে বড়। আমরা overflow প্রপার্টি ব্যবহার করে স্ক্রোলিং ফাংশনালিটি বজায় রেখে স্ক্রোলবার হাইড করতে পারি।
সিনট্যাক্স
selector { overflow-x: value; overflow-y: value; }
/* Or shorthand */
selector { overflow: value; }
সম্ভাব্য ভ্যালু
| ভ্যালু | বিবরণ |
|---|---|
visible | কন্টেন্ট ক্লিপড নয়, এলিমেন্টের বাইরে রেন্ডার হতে পারে |
hidden | কন্টেন্ট ক্লিপড এবং স্ক্রোলবার হিডেন |
scroll | কন্টেন্ট ক্লিপড কিন্তু স্ক্রোলবার সবসময় ভিজিবল |
auto | কন্টেন্ট ওভারফ্লো হলে স্ক্রোলবার দেখা যায় |
পদ্ধতি ১: ভার্টিক্যাল স্ক্রোলবার হাইড করা
ভার্টিক্যাল স্ক্রোলবার হাইড করতে হরিজন্টাল স্ক্রোলিং সক্ষম রেখে, 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>
নিচে হরিজন্টাল স্ক্রোলবার ভিজিবল সহ একটি বর্ডার্ড কন্টেইনার, কিন্তু কোনো ভার্টিক্যাল স্ক্রোলবার নেই। কন্টেন্ট হরিজন্টালি প্রসারিত এবং বাম/ডান স্ক্রোল করা যায়।
পদ্ধতি ২: হরিজন্টাল স্ক্রোলবার হাইড করা
হরিজন্টাল স্ক্রোলবার হাইড করতে ভার্টিক্যাল স্ক্রোলিং সক্ষম রেখে, 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>
ডান পাশে ভার্টিক্যাল স্ক্রোলবার ভিজিবল সহ একটি বর্ডার্ড কন্টেইনার, কিন্তু কোনো হরিজন্টাল স্ক্রোলবার নেই। কন্টেন্ট ভার্টিক্যালি প্রসারিত এবং উপরে/নিচে স্ক্রোল করা যায়।
পদ্ধতি ৩: উভয় স্ক্রোলবার হাইড করা
উভয় হরিজন্টাল এবং ভার্টিক্যাল স্ক্রোলবার সম্পূর্ণ হাইড করতে, 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>
কোনো ভিজিবল স্ক্রোলবার নেই এমন একটি বর্ডার্ড কন্টেইনার। কন্টেইনার বাউন্ডারি ছাড়া প্রসারিত কন্টেন্ট ক্লিপড হয়ে ভিউ থেকে হিডেন।
উপসংহার
CSS overflow প্রপার্টি ব্যবহার করে স্ক্রোলবার হাইড করলে ক্লিনার ইন্টারফেস তৈরি হয়। স্ক্রোলবার সম্পূর্ণ হাইড করতে overflow: hidden ব্যবহার করুন, বা overflow-x এবং overflow-y প্রপার্টি দিয়ে হরিজন্টাল এবং ভার্টিক্যাল স্ক্রোলিং নির্বাচনামাত্রে কন্ট্রোল করুন।
