कैसे करें - स्क्रॉलबार छुपाएं
CSS के साथ स्क्रॉलबार को छिपाने का तरीका जानें।
स्क्रॉलबार कैसे छिपाएं
overflow: hidden;
क्षैतिज और लंबवत स्क्रॉलबार दोनों को छिपाने के लिए जोड़ें ।
उदाहरण
body {
overflow: hidden; /* Hide scrollbars */
}
केवल लंबवत स्क्रॉलबार, या केवल क्षैतिज स्क्रॉलबार को छिपाने के लिए, या का उपयोग overflow-y
करें overflow-x
:
उदाहरण
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
ध्यान दें कि overflow: hidden
स्क्रॉलबार की कार्यक्षमता को भी हटा देगा। पृष्ठ के अंदर स्क्रॉल करना संभव नहीं है।
युक्ति: संपत्ति के बारे में अधिक जानने के लिए overflow
, हमारे सीएसएस अतिप्रवाह ट्यूटोरियल या सीएसएस अतिप्रवाह संपत्ति संदर्भ पर जाएं ।
स्क्रॉलबार छुपाएं लेकिन कार्यक्षमता बनाए रखें
स्क्रॉलबार को छिपाने के लिए, लेकिन फिर भी स्क्रॉल करते रहने में सक्षम होने के लिए, आप निम्न कोड का उपयोग कर सकते हैं:
उदाहरण
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
वेबकिट ब्राउज़र, जैसे क्रोम, सफारी और ओपेरा, गैर-मानक ::-webkit-scrollbar
छद्म तत्व का समर्थन करते हैं, जो हमें ब्राउज़र के स्क्रॉलबार के रूप को संशोधित करने की अनुमति देता है। आईई और एज संपत्ति का समर्थन करते -ms-overflow-style:
हैं, और फ़ायरफ़ॉक्स scrollbar-width
संपत्ति का समर्थन करता है, जो हमें स्क्रॉलबार को छिपाने की अनुमति देता है, लेकिन कार्यक्षमता रखता है।