विशेषज्ञ गाइड: यूजर अनुभव को प्रभावित किए बिना CSS में स्क्रॉलबार छिपाना

CSS का उपयोग करके स्क्रॉलबार छिपाने के लिए, हम विभिन्न दृष्टिकोणों को समझेंगे। स्क्रॉलबार वेब ब्राउज़र के मुख्य घटक हैं जो उपयोगकर्ताओं को दृश्यमान विंडो से बड़े सामग्री क्षेत्रों को नेविगेट करने की अनुमति देते हैं। हम overflow प्रॉपर्टी का उपयोग करके स्क्रॉलिंग कार्यक्षमता को बनाए रखते हुए स्क्रॉलबार छिपा सकते हैं।

सिंटैक्स

selector { overflow-x: value; overflow-y: value; }
/* या संक्षिप्त */
selector { overflow: value; }

संभावित मान

विधि 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">यह एक बहुत लंबी टेक्स्ट लाइन है जो कंटेनर की चौड़ाई से आगे निकल जाएगी और पूरी तरह से देखने के लिए हॉरिजॉन्टल स्क्रॉलिंग की आवश्यकता होगी।</div>
<p>यहां और सामग्री जो सामान्य रूप से वर्टिकल स्क्रॉलिंग का कारण बनेगी।</p>
<p>लेकिन वर्टिकल स्क्रॉलबार छिपा हुआ है।</p>
</div>
</body>
</html>

नीचे एक हॉरिजॉन्टल स्क्रॉलबार दिखाई देने वाला एक बॉर्डर वाला कंटेनर, लेकिन कोई वर्टिकल स्क्रॉलबार नहीं। सामग्री क्षैतिज रूप से फैली हुई है और इसे बाएं/दाएं स्क्रॉल किया जा सकता है।

विधि 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>यह सामान्य टेक्स्ट सामग्री के साथ पैराग्राफ एक है।</p>
<p>यह और सामग्री के साथ पैराग्राफ दो है।</p>
<p>ओवरफ्लो बनाने के लिए और टेक्स्ट जोड़ता पैराग्राफ तीन।</p>
<p>वर्टिकल स्क्रॉलिंग के लिए पैराग्राफ चार।</p>
<p>वर्टिकल स्क्रॉलिंग के लिए पैराग्राफ पांच।</p>
</div>
</div>
</body>
</html>

दाईं ओर वर्टिकल स्क्रॉलबार दिखाई देने वाला एक बॉर्डर वाला कंटेनर, लेकिन कोई हॉरिजॉन्टल स्क्रॉलबार नहीं। सामग्री लंबवत रूप से फैली हुई है और इसे ऊपर/नीचे स्क्रॉल किया जा सकता है।

विधि 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>
</head>
<body>
<div class="container">
<div class="content">
<p>यह सामग्री कंटेनर सीमाओं से क्षैतिज और लंबवत दोनों रूप से आगे निकल जाती है।</p>
<p>हालांकि, कोई स्क्रॉलबार दृश्यमान नहीं हैं, इसलिए ओवरफ्लोइंग सामग्री केवल क्लिप हो जाती है।</p>
<p>उपयोगकर्ता छिपी हुई सामग्री को देखने के लिए स्क्रॉल नहीं कर सकते।</p>
</div>
</div>
</body>
</html>

कोई दृश्यमान स्क्रॉलबार वाला एक बॉर्डर वाला कंटेनर नहीं। कंटेनर सीमाओं से आगे निकलने वाली सामग्री क्लिप हो जाती है और दृश्य से छिप जाती है।

निष्कर्ष

CSS overflow प्रॉपर्टीज का उपयोग करके स्क्रॉलबार छिपाने से क्लीनर इंटरफेस बनते हैं। स्क्रॉलबार पूरी तरह से छिपाने के लिए overflow: hidden का उपयोग करें, या overflow-x और overflow-y प्रॉपर्टीज के साथ हॉरिजॉन्टल और वर्टिकल स्क्रॉलिंग को चुनिंदा रूप से नियंत्रित करें।