<पी> 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.
निष्कर्ष
<पी> सीएसएस overflow का उपयोग करके स्क्रॉलबार छिपाना Properties क्लीनर इंटरफ़ेस बनाता है। overflow: hidden का प्रयोग करें स्क्रॉलबार को पूरी तरह से छिपाने के लिए, या overflow-x के साथ क्षैतिज और ऊर्ध्वाधर स्क्रॉलिंग को चुनिंदा रूप से नियंत्रित करने के लिए और overflow-y गुण. <पी> 
