স্ক্রোলবার এবং ইউজার এক্সপেরিয়েন্স
স্ক্রোলবার ওয়েবপেজের কন্টেন্ট Ск্রোল করার নির্দেশক। স্ক্রোলবার লুকানোBeauty এবং ডিজাইনের জন্য করা হয়, কিন্তু ফাংশনালিটি বজায় রাখা জরুরি।
CSS ইমপ্লিমেন্টেশন: ভেন্ডর প্রিফিক্স
সকল ব্রাউজার একসমান নয়, তাই ভেন্ডর প্রিফিক্স ব্যবহার করতে হয়:
| ভেন্ডর প্রিফিক্স | ব্রাউজার |
|---|---|
| -webkit- | Chrome, Safari, Opera, iOS browsers |
| -moz- | Firefox (iOS ছাড়া) |
| -o- | পুরনো Opera ভার্সন |
| -ms- | Internet Explorer, MS Edge |
কোড উদাহরণ
* {
box-sizing: border-box;
scrollbar-width: none; /* Firefox */
}
.inner-container::-webkit-scrollbar {
display: none; /* WebKit browsers */
}
.container {
overflow: scroll;
/* অন্যান্য স্টাইল */
}
মূল কোড স্নিপেট
.container {
width: 450px;
border: 2px solid #666666;
background: lightgrey;
overflow: scroll;
min-height: 520px;
margin: 0 auto;
}
.inner-container {
position: absolute;
left: 10;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none;
}
গুরুত্বপূর্ণ নোট
- Firefox-এ
scrollbar-width: noneকাজ করে - Chrome/Safari-এ
::-webkit-scrollbar { display: none }কাজ করে - স্ক্রোলবার লুকানো সত্ত্বেও স্ক্রোল ফাংশনালিটি বজায় থাকে
- হরিজেন্টাল স্ক্রোলবার অনিচ্ছাকৃতভাবে আসলে সাইজিং সমস্যা ফিক্স করুন, লুকিয়ে রাখবেন না
উপসংহার
ক্রস-ব্রাউজার স্ক্রোলবার লুকানোর জন্য ভেন্ডর প্রিফিক্স ব্যবহার করুন। আপনার কোডে বিভিন্ন পদ্ধতি পরীক্ষা করে সবচেয়ে ভালো সমাধান বের করুন।
