एक HTML पृष्ठ पर स्क्रॉल पट्टी को छिपाते हुए

Question

क्या स्क्रॉल पट्टी को छिपाने के लिए CSS का उपयोग किया जा सकता है? आप यह कैसे करेंगे?

Comments

@ युवीकेम, आईई 11 के लिए कोई चाल नहीं है

— डीएवी

Answer 1

overflow: hidden;इस तरह बॉडी टैग पर सेट करें:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

ऊपर दिया गया कोड क्षैतिज और ऊर्ध्वाधर स्क्रॉलबार दोनों को छुपाता है।

यदि आप केवल ऊर्ध्वाधर स्क्रॉलबार छिपाना चाहते हैं , तो उपयोग करें overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

और यदि आप केवल क्षैतिज स्क्रॉलबार छिपाना चाहते हैं , तो उपयोग करें overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

---

नोट: यह स्क्रॉल करने की सुविधा को भी अक्षम कर देगा। यदि आप केवल स्क्रॉल बार को छिपाना चाहते हैं, लेकिन नीचे दिए गए उत्तरों को देखें, लेकिन स्क्रॉल सुविधा को नहीं।

Comments

अतिप्रवाह संपत्ति के लिए कोई "नहीं" विकल्प है। उपलब्ध विकल्पों में शामिल हैं: दृश्यमान, छिपा हुआ, स्क्रॉल, ऑटो, इनहेरिट।

— सर्गी सोकोलेन्को

वास्तव में, यह पूरी तरह से सही उत्तर नहीं है: अतिप्रवाह: छिपी स्क्रॉलबार को "छिपा" नहीं करता है। यह पृष्ठ पर स्क्रॉल करने की सुविधा भी बंद कर देता है। यह ठीक वैसा नहीं है जैसा हम पूछते हैं।

— एड्रियेंडनेट

क्रोम में, जब बॉडी ओवरफ्लो को hiddenस्क्रॉल करने के लिए सेट किया जाता है, तो माउस स्कॉलर व्हील के साथ काम करेगा। फ़ायरफ़ॉक्स में, स्क्रॉलिंग एक माउस स्क्रोलर व्हील के साथ काम नहीं करेगा, यह पता लगाने में मुझे थोड़ा समय लगा।

— डग मोलिनक्स

मैं इस बिंदु पर नहीं देखता कि overflow: hiddenस्क्रॉल करना अक्षम करता है। यदि कोई स्क्रॉलबार छिपाना चाहता है, तो संभवतः वे नियंत्रण को अनावश्यक रूप से हटा देते हैं क्योंकि पहली बार स्क्रॉल करने के लिए कोई सामग्री नहीं है । या शायद वे अभी पूरी तरह से स्क्रॉल करने की अनुमति नहीं देना चाहते हैं ।

— बोल्टकॉक

मेरे लिए दावा पूरी तरह से मान्य है, क्योंकि सवाल स्क्रॉलबार को छिपाने का है , स्क्रॉलिंग को अक्षम करने का नहीं ।

— साबिस

Answer 2

WebKit स्क्रॉलबार छद्म तत्वों का समर्थन करता है जिन्हें मानक CSS नियमों के साथ छिपाया जा सकता है:

#element::-webkit-scrollbar {
    display: none;
}

यदि आप सभी स्क्रॉलबार छिपाना चाहते हैं, तो उपयोग करें

::-webkit-scrollbar {
    display: none;
}

मैं बहाल करने के बारे में निश्चित नहीं हूं - यह काम किया था, लेकिन इसे करने का एक सही तरीका हो सकता है:

::-webkit-scrollbar {
    display: block;
}

आप निश्चित रूप से हमेशा उपयोग width: 0कर सकते हैं , जिसे बाद में आसानी से बहाल किया जा सकता है width: auto, लेकिन मैं widthदृश्यता की चोटियों के लिए दुर्व्यवहार का प्रशंसक नहीं हूं ।

फ़ायरफ़ॉक्स 64 अब डिफ़ॉल्ट रूप से प्रयोगात्मक स्क्रॉलबार-चौड़ाई की संपत्ति का समर्थन करता है (63 को सेट करने के लिए कॉन्फ़िगरेशन ध्वज की आवश्यकता होती है)। स्क्रॉलबार को फ़ायरफ़ॉक्स 64 में छिपाने के लिए:

#element {
    scrollbar-width: none;
}

यह देखने के लिए कि क्या आपका वर्तमान ब्राउज़र छद्म तत्व का समर्थन करता है या scrollbar-width, इस स्निपेट को आज़माएँ:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

---

(ध्यान दें कि यह वास्तव में प्रश्न का सही उत्तर नहीं है, क्योंकि यह क्षैतिज सलाखों को भी छिपाता है, लेकिन यही वह चीज है जिसकी मुझे तलाश थी जब Google ने मुझे यहां बताया था, इसलिए मुझे लगा कि मैं इसे वैसे भी पोस्ट करूंगा।)

Comments

बस मैं क्या देख रहा था, क्योंकि मैं सच में स्क्रॉलबार को छिपाना चाहता था, लेकिन तत्वों को अभी भी स्क्रॉल करने योग्य है (उदाहरण के लिए / नीचे कीज़)

— माथियास

यह सबसे अच्छा जवाब होना चाहिए क्योंकि अन्य समाधान आपको स्क्रॉल करने नहीं देते हैं

— 20

क्या यह वेबकिट के अलावा अन्य ब्राउज़रों का समर्थन करता है? क्योंकि यह मोज़िला में काम नहीं करता है।

— रूपम दत्ता

हालांकि मोज़िला ट्रैकर पर एक सुविधा अनुरोध है । आप इसके लिए वहां पर मतदान करके कार्यान्वयन को गति देने में सक्षम हो सकते हैं :)

— पीटर

यह सही जवाब है! जैसे कि अन्य गायब हैं। समस्या सिर्फ स्क्रॉलबार को छिपाने की नहीं है, बल्कि ओवरफ्लो अन्य शैलियों को कैसे प्रभावित करता है। मैं हमारे ऐप में इसी समस्या में भाग गया। हम ऐप के 99% पर ओवरफ्लो ऑटो नहीं चाहते हैं, हालांकि एक सहायता अनुभाग है जहां आप चाहते हैं कि उपयोगकर्ता नीचे स्क्रॉल करने में सक्षम हो। चूंकि शरीर में अतिप्रवाह है: छिपी हुई है, इसे संभालने के लिए एकमात्र वान रूट पर एक एनजी-क्लास था, या इस दोस्तों के लिए धन्यवाद, बस कुछ सीएसएस का उपयोग करना।

— लियोन गबन

Answer 3

हाँ, की तरह ..

जब आप सवाल पूछते हैं, "क्या ब्राउज़र के स्क्रॉल-बार किसी तरह से हटाए जा सकते हैं, केवल छिपे या छलावरण के बजाय", हर कोई कहेगा "संभव नहीं" क्योंकि सभी ब्राउज़र से स्क्रॉलबार को हटाना संभव नहीं है आज्ञाकारी और क्रॉस-संगत तरीका, और फिर प्रयोज्य का पूरा तर्क है।

हालाँकि, यदि आप अपने वेबपेज को ओवरफ्लो करने की अनुमति नहीं देते हैं तो ब्राउज़र को कभी भी स्क्रॉलबार बनाने और प्रदर्शित करने की आवश्यकता से रोकना संभव है।

इसका मतलब यह है कि हमें उसी व्यवहार को बदलना होगा जो ब्राउज़र आमतौर पर हमारे लिए करता है और ब्राउज़र को धन्यवाद कहता है, लेकिन कोई धन्यवाद दोस्त नहीं। स्क्रॉलबार्स (जिसे हम सभी जानते हैं संभव नहीं है) को हटाने की कोशिश करने के बजाय हम स्क्रॉल (पूरी तरह से संभव) से बच सकते हैं और उन तत्वों के भीतर स्क्रॉल कर सकते हैं जो हम बनाते हैं और उन पर अधिक नियंत्रण होता है।

छिपा हुआ अतिप्रवाह के साथ एक div बनाएँ। पता लगाएँ कि उपयोगकर्ता कब स्क्रॉल करने का प्रयास करता है, लेकिन इसलिए असमर्थ है क्योंकि हमने ब्राउज़र को ओवरफ़्लो के साथ स्क्रॉल करने की क्षमता को अक्षम कर दिया है: छिपा हुआ है .. और इसके बजाय जब यह होता है तो जावास्क्रिप्ट का उपयोग करके सामग्री को ऊपर ले जाते हैं। जिससे ब्राउजर डिफॉल्ट स्क्रॉलिंग के बिना हमारी खुद की स्क्रॉलिंग बनाता है या iScroll जैसे प्लगइन का उपयोग करता है ।

---

पूरी तरह से होने के लिए; स्क्रॉल-बार में हेरफेर करने के सभी विक्रेता विशिष्ट तरीके:

इंटरनेट एक्सप्लोरर 5.5+

* ये गुण कभी भी CSS विनिर्देशन का हिस्सा नहीं थे, न ही इन्हें कभी मंजूरी दी गई थी और न ही विक्रेता ने उपसर्ग किया था, लेकिन वे इंटरनेट एक्सप्लोरर और कोनेकर में काम करते हैं। इन्हें प्रत्येक एप्लिकेशन के लिए उपयोगकर्ता शैली शीट में स्थानीय रूप से सेट किया जा सकता है। इंटरनेट एक्सप्लोरर में आप इसे "एक्सेसिबिलिटी" टैब के तहत कोनेकर में "एक्सेसिबिलिटी" टैब के तहत पाते हैं।

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Internet Explorer 8 के रूप में ये गुण Microsoft द्वारा उपसर्ग किए गए थे, लेकिन वे अभी भी W3C द्वारा अनुमोदित नहीं थे ।

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

इंटरनेट एक्सप्लोरर के बारे में अधिक जानकारी

इंटरनेट एक्सप्लोरर बनाता है scroll उपलब्ध कराता है जो स्क्रॉल सलाखों को अक्षम या सक्षम करने के लिए सेट करता है या नहीं; इसका उपयोग स्क्रॉल बार की स्थिति के मूल्य को प्राप्त करने के लिए भी किया जा सकता है।

Microsoft इंटरनेट एक्सप्लोरर 6 और बाद में, जब आप !DOCTYPEमानकों-अनुरूप मोड को निर्दिष्ट करने के लिए घोषणा का उपयोग करते हैं , तो यह विशेषता HTML तत्व पर लागू होती है। जब मानक-अनुपालन मोड निर्दिष्ट नहीं किया जाता है, तो इंटरनेट एक्सप्लोरर के पुराने संस्करणों के साथ, यह विशेषता BODYतत्व पर लागू होती है , न किHTML तत्व।

यह भी ध्यान देने योग्य है कि .NET .NET के साथ काम System.Windows.Controls.Primitivesकरते समय प्रेजेंटेशन फ्रेमवर्क में स्क्रॉलबार को रेंडर करने के लिए जिम्मेदार है।

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• MSDN। मूल UI गुण
• W3C। गैर-मानक स्क्रॉलबार गुणों के बारे में
• MSDN। .NET स्क्रॉलबार क्लास

---

वेबकिट

स्क्रॉल-बार अनुकूलन से संबंधित WebKit एक्सटेंशन हैं:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

इन्हें अतिरिक्त छद्म चयनकर्ताओं के साथ जोड़ा जा सकता है:

• :horizontal - क्षैतिज छद्म वर्ग किसी भी स्क्रॉलबार टुकड़ों पर लागू होता है जिसमें क्षैतिज अभिविन्यास होता है।
• :vertical - ऊर्ध्वाधर छद्म वर्ग किसी भी स्क्रॉलबार टुकड़ों पर लागू होता है जिसमें ऊर्ध्वाधर अभिविन्यास होता है।
• :decrement- घटता छद्म वर्ग बटन और ट्रैक टुकड़े पर लागू होता है। यह इंगित करता है कि बटन या ट्रैक टुकड़ा उपयोग किए जाने पर दृश्य की स्थिति को कम कर देगा या नहीं (जैसे, एक ऊर्ध्वाधर स्क्रॉलबार पर, एक क्षैतिज स्क्रॉलबार पर छोड़ दिया गया)।
• :increment- वेतन वृद्धि छद्म वर्ग बटन और ट्रैक टुकड़े पर लागू होता है। यह इंगित करता है कि बटन या ट्रैक टुकड़ा उपयोग किए जाने पर दृश्य की स्थिति को बढ़ाएगा या नहीं (जैसे, एक ऊर्ध्वाधर स्क्रॉलबार पर नीचे, एक क्षैतिज स्क्रॉलबार पर सही)।
• :start- प्रारंभ छद्म वर्ग बटन और ट्रैक टुकड़े पर लागू होता है। यह इंगित करता है कि क्या वस्तु को अंगूठे से पहले रखा गया है।
• :end- अंत छद्म वर्ग बटन और ट्रैक टुकड़े पर लागू होता है। यह इंगित करता है कि क्या वस्तु को अंगूठे के बाद रखा गया है।
• :double-button- डबल बटन छद्म वर्ग बटन और ट्रैक टुकड़े पर लागू होता है। इसका उपयोग यह पता लगाने के लिए किया जाता है कि क्या बटन एक जोड़ी बटन का हिस्सा है जो स्क्रॉलबार के एक ही छोर पर एक साथ हैं। ट्रैक टुकड़ों के लिए यह इंगित करता है कि ट्रैक टुकड़ा बटन की एक जोड़ी को समाप्त करता है या नहीं।
• :single-button- एकल बटन छद्म वर्ग बटन और ट्रैक टुकड़े पर लागू होता है। इसका उपयोग यह पता लगाने के लिए किया जाता है कि स्क्रॉलबार के अंत में एक बटन अपने आप है या नहीं। ट्रैक टुकड़ों के लिए यह इंगित करता है कि ट्रैक टुकड़ा एक सिंगलटन बटन को समाप्त करता है या नहीं।
• :no-button - टुकड़ों को ट्रैक करने के लिए लागू होता है और यह इंगित करता है कि ट्रैक टुकड़ा स्क्रॉलबार के किनारे तक चलता है या नहीं, अर्थात, ट्रैक के उस छोर पर कोई बटन नहीं है।
• :corner-present - सभी स्क्रॉलबार के टुकड़ों पर लागू होता है और यह इंगित करता है कि स्क्रॉलबार कोने मौजूद है या नहीं।
• :window-inactive- सभी स्क्रॉलबार टुकड़ों पर लागू होता है और इंगित करता है कि स्क्रॉलबार युक्त विंडो वर्तमान में सक्रिय है या नहीं। (हाल ही में रात के समय में, यह छद्म वर्ग अब :: चयन पर भी लागू होता है। हमारी योजना इसे किसी भी सामग्री के साथ काम करने और नए मानक छद्म वर्ग के रूप में प्रस्तावित करने की है।)

इन संयोजनों के उदाहरण

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• स्टाइलिंग स्क्रॉलबार - Webkit.org

क्रोम के बारे में अधिक जानकारी

addWindowScrollHandler सार्वजनिक स्थैतिक हैंडलररेडग्रैड AddWindowScrollHandler (Window.ScrollHandler हैंडलर)

  एक विंडो जोड़ता है। कंट्रोलर हैंडलर पैरामीटर्स: हैंडलर - हैंडलर रिटर्न: हैंडलर पंजीकरण [ स्रोत ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

---

मोज़िला

स्क्रॉल-बार में हेरफेर करने के लिए मोज़िला के पास कुछ एक्सटेंशन हैं, लेकिन इन सभी का उपयोग नहीं करने की सिफारिश की जाती है।

• -moz-scrollbars-none वे अतिप्रवाह का उपयोग करने की सलाह देते हैं: इसके स्थान पर छिपा हुआ।
• -moz-scrollbars-horizontal ओवरफ्लो-एक्स के समान
• -moz-scrollbars-vertical ओवरफ्लो-वाई के समान

• -moz-hidden-unscrollableकेवल उपयोगकर्ता प्रोफ़ाइल सेटिंग में आंतरिक रूप से काम करता है। XML रूट तत्वों को स्क्रॉल करने में अक्षम करता है और वेब पेज को स्क्रॉल करने के लिए एरो कीज़ और माउस व्हील का उपयोग करके अक्षम करता है।

• 'ओवरफ्लो' पर मोज़िला डेवलपर डॉक्स

मोज़िला के बारे में अधिक जानकारी

जहाँ तक मुझे पता है यह वास्तव में उपयोगी नहीं है, लेकिन यह ध्यान देने योग्य है कि जो विशेषता स्क्रॉलबार को फ़ायरफ़ॉक्स में प्रदर्शित होती है या नहीं, उसे नियंत्रित करती है ( संदर्भ लिंक ):

• विशेषता:        स्क्रॉलबार
• प्रकार:               nsIDOMBarProp
• विवरण:   वह ऑब्जेक्ट जो स्क्रॉलबार को विंडो में दिखाया गया है या नहीं इसे नियंत्रित करता है। यह विशेषता जावास्क्रिप्ट में "बदली" है। सिफ़ पढ़िये

अंतिम लेकिन कम से कम, पैडिंग जादू की तरह नहीं है।

जैसा कि पहले कुछ अन्य उत्तरों में उल्लेख किया गया है, यहां एक दृष्टांत है जो पर्याप्त रूप से आत्म-व्याख्यात्मक है।

---

इतिहास का पाठ

सिर्फ इसलिए कि मैं उत्सुक हूं, मैं स्क्रॉलबार की उत्पत्ति के बारे में सीखना चाहता था, और ये मेरे द्वारा पाए गए सबसे अच्छे संदर्भ हैं।

• स्क्रॉलिंग और स्क्रॉलबार पर 10 आविष्कार
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

विविध

HTML5 विनिर्देश ड्राफ्ट में, seamlessस्क्रॉल-बार को आईफ्रेम में प्रदर्शित होने से रोकने के लिए विशेषता को परिभाषित किया गया था ताकि उन्हें एक पृष्ठ पर आसपास की सामग्री के साथ मिश्रित किया जा सके । यद्यपि यह तत्व नवीनतम संशोधन में प्रकट नहीं होता है।

scrollbarBarProp वस्तु का एक बच्चा है windowवस्तु और यूजर इंटरफेस तत्व यह है कि एक स्क्रॉल तंत्र, या कुछ इसी तरह के इंटरफेस अवधारणा शामिल है प्रतिनिधित्व करता है। स्क्रॉल पट्टियाँ दिखाई देने पर window.scrollbars.visibleवापस आ जाएगी true।

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

हिस्ट्री एपीआई में पेज लोड पर स्क्रॉल स्थिति बनाए रखने के लिए पेज नेविगेशन पर स्क्रॉल बहाली के लिए सुविधाएँ भी शामिल हैं।

window.history.scrollRestoration स्क्रॉल करने की स्थिति की जाँच करने के लिए या इसकी स्थिति को बदलने के लिए इस्तेमाल किया जा सकता है (जोड़ा जा रहा है ="auto"/"manual" । ऑटो डिफ़ॉल्ट मूल्य है। इसे मैन्युअल रूप से बदलने का अर्थ है कि आप डेवलपर के रूप में किसी भी स्क्रॉल परिवर्तन का स्वामित्व ले लेंगे, जो तब आवश्यक हो सकता है जब उपयोगकर्ता ऐप के इतिहास का पता लगाता है। यदि आपको जरूरत है, तो आप स्क्रॉल पोजीशन का ट्रैक रख सकते हैं क्योंकि आप इतिहास प्रविष्टियों को history.pushState () के साथ पुश करते हैं।

---

आगे की पढाई:

• विकिपीडिया पर स्क्रॉलबार
• स्क्रॉल बार (विंडोज)
• स्क्रॉल विधि
• स्क्रॉल विधि - माइक्रोसॉफ्ट देव नेटवर्क
• गितुब पर आईक्रोल (ऊपर पहले खंड में संदर्भित)
• स्क्रॉलिंग और स्क्रॉलबार्स जकोब नीलसन द्वारा प्रयोज्य के बारे में एक लेख

उदाहरण

• स्वतंत्र स्क्रॉलिंग पैनल जिसमें कोई बॉडी स्क्रॉल नहीं है (सिर्फ CSS का उपयोग करके) - बेन फ्रेन (10-21-2014)

Comments

यह उत्तर वर्तमान में अपवर्तित उत्तर के बजाय काफी अधिक ब्राउज़रों (अर्थात् IE) पर लागू होगा।

— मैट जेन्सेन

बढ़िया जोड़। वास्तव में आज उसी समाधान को लागू किया गया! यह उल्लेख के लायक हो सकता है कि अन्य तत्व अतिप्रवाह होना चाहिए: छिपा हुआ;

— मैट जेन्सेन

यह सही, पूर्ण विशेषताओं वाला उत्तर है। मैं बताता हूं कि यदि आप किसी उपयोगकर्ता को स्क्रॉल करने से रोकना चाहते हैं तो आप ओवरफ्लो नियम का उपयोग कर सकते हैं। तुम भी अपने घर बनाया स्क्रॉल सुविधा लागू कर सकते हैं। यदि वह पर्याप्त नहीं है तो आप अलग-अलग ब्राउज़रों के लिए अलग-अलग नियमों का उपयोग करके स्क्रॉल बार गुण सीधे सेट कर सकते हैं।

— newshorts

हालांकि यह एक अविश्वसनीय रूप से अच्छी तरह से सोचा गया उत्तर है, और बहुत विस्तृत है, और कई संसाधन जुड़े हुए हैं, सहायक प्रौद्योगिकी उपयोगकर्ताओं के लिए बड़े पैमाने पर समस्याएं हैं जब आप स्क्रॉल को अक्षम करते हैं और सभी स्क्रॉलिंग को संभालने के लिए जावास्क्रिप्ट का उपयोग करते हैं। यदि आप उपयोगकर्ता के लिए स्क्रॉल करते समय हर बार किसी तत्व पर ध्यान केंद्रित नहीं करते हैं, तो आपका एटी उपयोगकर्ता पूरी तरह से खो जाएगा। इसके अलावा, आपका उपयोगकर्ता अब वह क्या देखता है पर सभी ठीक-ठीक नियंत्रण खो दिया है। अपने उपयोगकर्ता के लिए स्क्रॉल करने के लिए बहुत खराब UX।

— शाइनिंगलाइट

MacOS हाई सिएरा पर फ़ायरफ़ॉक्स क्वांटम 63.0.1, 'अतिप्रवाह: -मोज़-स्क्रॉलबार्स-नोनी' नियम के साथ भी स्क्रॉलबार को छिपा नहीं सकता है। किसी को भी इस के लिए समाधान जानता है? अन्य सभी ब्राउज़र सुझाए गए समाधानों के साथ काम करने लगते हैं।

— सिमोना एड्रियानी

Answer 4

आप इसे एक आवरण के साथ पूरा कर सकते हैं divजिसमें इसका अतिप्रवाह छिपा हुआ है, और आंतरिक divसेट auto।

भीतरी divस्क्रॉल पट्टी को हटाने के लिए , आप इसे बाहरी divके व्यूपोर्ट से बाहर निकाल सकते हैं ताकि आंतरिक पर एक नकारात्मक मार्जिन लागू हो सके div। फिर आंतरिक डिव के बराबर पैडिंग लागू करें ताकि सामग्री देखने में बनी रहे।

JSFiddle

एचटीएमएल

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

सीएसएस

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

Comments

यह स्वीकृत उत्तर imo होना चाहिए। केवल मुझे जो कुछ जोड़ना था height: inherited, वह .viewportसीएसएस में था ।

— हेलजगेट

इस उत्तर के साथ एकमात्र समस्या स्थानांतरित स्क्रॉलबार द्वारा छोड़ी गई "मृत" जगह है, क्योंकि हम वास्तव में स्क्रॉलबार की चौड़ाई को नहीं जानते हैं, ताकि इसे गद्दी से घटाया जा सके।

— Frondor

साथ ही, आपको पैडिंग और मार्जिन के लिए निश्चित मानों का उपयोग करने की आवश्यकता नहीं है। 100%अधिक बहुमुखी है और काम करता है।

— Frondor

IE11, ओपेरा और क्रोम में काम किया, अभी तक फ़ायरफ़ॉक्स का परीक्षण नहीं किया है। यह शानदार उत्तर है, +1।

— लगभग एक शुरुआत

क्यों -100pxऔर 100px??

— ओल्डबॉय

Answer 5

यह मेरे लिए सरल सीएसएस गुणों के साथ काम करता है:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

फ़ायरफ़ॉक्स के पुराने संस्करणों के लिए, उपयोग करें: overflow: -moz-scrollbars-none;

Comments

दुर्भाग्य से, यह MacOS Sierra पर FireFox 48.0.2 में काम नहीं करता है। यदि आप करते हैं overflow: -moz-scrollbars-none;तो आप स्क्रॉलबार को सफलतापूर्वक हटा देते हैं, लेकिन आप स्क्रॉल करने की क्षमता को भी हटा देते हैं। आप बस के रूप में अच्छी तरह से सेट overflow: hiddenकर सकते हैं .container।

— मार्टिन चैम्बरलिन

ओह, और developer.mozilla.org/en-US/docs/Web/CSS/overflow से , हम इस बारे में पढ़ते हैं -moz-scrollbars-none: "यह एक अप्रचलित एपीआई है और अब काम करने की गारंटी नहीं है।"

— मार्टिन चैम्बरलिन

मैंने फ़ायरफ़ॉक्स :) के लिए नवीनतम समर्थन के साथ अपना जवाब अपडेट किया है :)

— हिस्टो इफ्तिमोव

Answer 6

यहाँ मेरा समाधान है, जो सैद्धांतिक रूप से सभी आधुनिक ब्राउज़रों को शामिल करता है:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html उस किसी भी तत्व से प्रतिस्थापित किया जा सकता है जिसे आप स्क्रॉलबार छिपाना चाहते हैं।

_{नोट : मैंने अन्य 19 उत्तरों को स्किम किया है, यह देखने के लिए कि क्या मैं जो कोड पोस्ट कर रहा हूं, वह पहले से ही कवर किया गया है, और ऐसा लगता है जैसे 2019 में खड़ा होने पर स्थिति में कोई एकल उत्तर नहीं देता है, हालांकि उनमें से बहुत सारे उत्कृष्ट विस्तार में जाते हैं। माफी अगर यह किसी और ने कहा है और मैं इसे याद किया।}

Comments

यहाँ पर सबसे ज्यादा जवाब दिया गया है

— अग्रिश

केवल समाधान है कि मेरी पुस्तक दुःस्वप्न तय: डी धन्यवाद!

— बूमड्राक

Answer 7

मुझे लगता है कि अगर आप अभी भी रुचि रखते हैं तो मुझे आप लोगों के लिए वर्कअराउंड मिल गया है। यह मेरा पहला हफ्ता है, लेकिन इसने मेरे लिए काम किया ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

Comments

क्रोम और फ़ायरफ़ॉक्स में मेरे लिए काम करता है, IE या किसी अन्य ब्राउज़र का परीक्षण नहीं किया है। jsfiddle.net/8xtfk729

— बेन डेविस

क्रोम (v54 कम से कम) पर, यह किसी कारण से स्क्रॉल व्हील के माध्यम से स्क्रॉल को अक्षम करता है। तीर कुंजी के माध्यम से स्क्रॉल करें, होम / एंड / पीजी डाउन / पीजी अप, टच फ्लिक, और माउस 3 क्लिक एन ड्रैग स्टिल काम करता है।

— हाउस3272

यह उत्तर कानूनी है, यह वास्तव में काम करता है और ब्राउज़रों में काम करता है।

— सैम

वह मेरी ओर से पूरी बात छिपाता है

— जॉनी

Answer 8

यदि आप मोबाइल उपकरणों के लिए एक स्क्रॉलबार छिपाने के लिए एक समाधान की तलाश कर रहे हैं, तो पीटर के उत्तर का पालन ​​करें !

यहाँ एक jsfiddle है , जो क्षैतिज स्क्रॉलबार को छिपाने के लिए नीचे दिए गए समाधान का उपयोग करता है।

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

इसे एंड्रॉइड 4.0.4 (आईसक्रीम ब्राउजर और क्रोम दोनों) में एंड्रॉइड 4.0.4 (आईओएस 6 और सफारी और क्रोम दोनों के साथ एक iPad पर) के साथ सैमसंग टैबलेट पर टेस्ट किया गया था।

Comments

उसका जवाब नहीं आईओएस 12.3 में क्रोम और सफारी पर काम करते हैं

— पुराने 2

Answer 9

CSS overflowसंपत्ति का उपयोग करें :

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

यहाँ कुछ और उदाहरण दिए गए हैं:

• अतिप्रवाह-एक्स, अतिप्रवाह-वाई परीक्षण
• सीएसएस अतिप्रवाह संपत्ति

Comments

यह वास्तव में क्रोम और सफारी पर आईओएस पर काम नहीं करता है

— ओल्डबॉय

Answer 10

जैसा कि अन्य लोगों ने पहले ही कहा था, सीएसएस का उपयोग करें overflow।

लेकिन अगर आप अभी भी चाहते हैं कि उपयोगकर्ता उस सामग्री को स्क्रॉल करने में सक्षम हो (बिना स्क्रॉलबार दिखाई दिए) आपको जावास्क्रिप्ट का उपयोग करना होगा।

एक समाधान के लिए यहां मेरे उत्तर को देखें: माउस / कीबोर्ड के साथ स्क्रॉल करने में सक्षम होने के दौरान स्क्रॉलबार छिपाएं

Comments

यह सही उत्तर है और पहले होना चाहिए। इससे ऊपर की हर चीज सवाल का जवाब नहीं देती है। ओपी विकलांगों को स्क्रॉल करने के लिए नहीं कहता है, ज़े स्क्रॉलबार को छिपाना चाहता है।

— Pixpax

Answer 11

पीटर के जवाब के अलावा:

#element::-webkit-scrollbar {
    display: none;
}

यह Internet Explorer 10 के लिए समान काम करेगा:

 #element {
      -ms-overflow-style: none;
 }

Answer 12

स्क्रॉलबार को छिपाने के लिए क्रॉस ब्राउज़र दृष्टिकोण।

यह एज, क्रोम, फ़ायरफ़ॉक्स और सफारी पर परीक्षण किया गया था

माउस व्हील के साथ स्क्रॉल करने में सक्षम होने के बावजूद स्क्रॉलबार को छिपाएं!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

Comments

यह कैसे काम करता है इसकी सराहना की जाएगी - स्क्रॉल पट्टी को छुपाने के लिए माता-पिता / बच्चे की दृश्यता के साथ खेलना भयानक है

— जैक जॉसन ने

@believesInSanta मैंने बेहतर व्याख्या करने के लिए टिप्पणियाँ और कोडपेन को जोड़ा। मैं आपके आकलन से सहमत नहीं हूं कि दृश्यता के साथ खेलना स्क्रॉलबार को छिपाने का एक भयानक तरीका है। मैं समझता हूं कि यह एक हैक है, लेकिन इस प्रभाव को प्राप्त करने का उचित तरीका यह होगा कि सभी ब्राउज़र स्क्रॉलबार को क्रोम और सफारी अनुमति की तरह अलग से स्टाइल करने के तरीके का समर्थन करें।

— ब्लेक प्लम्ब

मुझे बस तुम्हारे हल से प्यार हो गया। यह पूरी तरह से काम करता है (आधुनिक ब्राउज़रों द्वारा उपयोग किए जाने वाले एप्लिकेशन में उपयोग किया जाता है)। आपको बहुत - बहुत धन्यवाद!

— मैक्सिमे लाफारी

Answer 13

यदि आप स्क्रॉल करने के लिए स्क्रॉल करने से पहले काम करना चाहते हैं, तो उन्हें स्टाइल करने पर विचार करें। ओएस एक्स के आधुनिक संस्करणों और मोबाइल ओएस में स्क्रॉलबार्स हैं, जो माउस के साथ हथियाने के लिए अव्यवहारिक हैं, काफी सुंदर और तटस्थ हैं।

स्क्रॉलबार छिपाने के लिए, जॉन कुर्लाक की एक तकनीक फ़ायरफ़ॉक्स उपयोगकर्ताओं को छोड़ने के अलावा अच्छी तरह से काम करती है जिनके पास टचपैड नहीं हैं, स्क्रॉल करने का कोई तरीका नहीं है जब तक कि उनके पास एक पहिया के साथ एक माउस नहीं होता है, जो वे शायद करते हैं, लेकिन फिर भी वे आमतौर पर केवल लंबवत स्क्रॉल कर सकते हैं ।

जॉन की तकनीक तीन तत्वों का उपयोग करती है:

• स्क्रॉलबार को मास्क करने के लिए एक बाहरी तत्व।
• स्क्रॉलबार के लिए एक मध्य तत्व।
• और एक तत्व तत्व दोनों को मध्य तत्व का आकार निर्धारित करता है और इसे स्क्रॉलबार बनाता है।

बाहरी और सामग्री तत्वों के आकार को एक ही सेट करना संभव है जो प्रतिशत का उपयोग करके समाप्त करता है, लेकिन मैं कुछ और नहीं सोच सकता जो सही ट्विकिंग के साथ काम नहीं करेगा।

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

क्षमा मेरी एस.ए.एस.एस. ; पी

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

परिक्षण

OS X 10.6.8 है। विंडोज विंडोज 7 है।

• फ़ायरफ़ॉक्स 32.0 स्क्रॉलबार छिपा हुआ है। एरो कीज़ स्क्रॉल नहीं करते, फ़ोकस करने के लिए क्लिक करने के बाद भी, लेकिन माउस व्हील और ट्रैकपैड पर दो उंगलियाँ करते हैं। ओएस एक्स और विंडोज।
• क्रोम 37.0 स्क्रॉलबार छिपा हुआ है। फ़ोकस क्लिक करने के बाद एरो कीज़ काम करती हैं। माउस व्हील और ट्रैकपैड काम करते हैं। ओएस एक्स और विंडोज।
• इंटरनेट एक्सप्लोरर 11 स्क्रॉलबार छिपा हुआ है। फ़ोकस क्लिक करने के बाद एरो कीज़ काम करती हैं। माउस व्हील काम करता है। खिड़कियाँ।
• सफारी 5.1.10 स्क्रॉलबार छिपा हुआ। फ़ोकस क्लिक करने के बाद एरो कीज़ काम करती हैं। माउस व्हील और ट्रैकपैड काम करते हैं। ओएस एक्स।
• Android 4.4.4 और 4.1.2। स्क्रॉलबार्स छिप गए। स्पर्श स्क्रॉल काम करता है। Chrome 37.0, फ़ायरफ़ॉक्स 32.0 और HTMLViewer 4.4.4 पर (जो भी हो) की कोशिश की। HTMLViewer में, पृष्ठ नकाबपोश सामग्री का आकार है और इसे स्क्रॉल भी किया जा सकता है! स्क्रॉलिंग पेज ज़ूमिंग के साथ इंटरएक्टिव तरीके से इंटरैक्ट करता है।

Comments

असंबंधित नोट (जहां तक ​​सवाल जाता है)। इस उदाहरण में, आपको @extend बनाम @include का उपयोग करना चाहिए। तो इसके बजाय @mixin{}, आप %size{}तब सीएसएस चयनकर्ताओं में कॉल करेंगे @extend %size;। आम तौर पर मिश्रण का उपयोग तब किया जाता है जब आपका परिणाम बदलने के लिए चर में खींच लिया जाता है। प्लेसहोल्डर (aka @extend) इस तरह के सरल दोहराया कोड के लिए हैं - जहां "फ़ंक्शन" की आवश्यकता नहीं है।

— माइक बैरिक

मैंने @extend का उपयोग करने के लिए संपादन किया। परिणाम शायद उन लोगों के लिए कम समझ में आता है जो SCSS नहीं जानते हैं, लेकिन अच्छी तरह से पर्याप्त हैं।

— सेठ डब्ल्यू। क्लेन

Answer 14

मैंने सोचा था कि मैं इस प्रश्न को पढ़ने वाले किसी अन्य व्यक्ति को इंगित करूंगा जो सेटिंग overflow: hidden(या अतिप्रवाह-वाई) पर हैbody तत्व मेरे लिए स्क्रॉलबार नहीं छिपा रहा है।

मुझे htmlतत्व का उपयोग करना था ।

Comments

मुझे ठीक से याद नहीं है क्योंकि यह कुछ महीने पहले था, लेकिन मेरा मानना ​​है कि क्रोम पर शरीर में अतिप्रवाह स्थापित करना काम कर रहा था, लेकिन फ़ायरफ़ॉक्स (या इसके विपरीत) नहीं। हालांकि, HTML टैग का उपयोग करना दोनों पर काम करता है।

— ब्रैड अजेवेडो

स्मृति से यह एक विचित्र मोड अंतर हो सकता है।

— थोमसट्रेटर

Answer 15

मैंने कुछ विकल्पों के साथ एक WebKit संस्करण लिखा है जैसे ऑटो छिपाना , छोटा संस्करण , केवल स्क्रॉल करना y , या केवल- x :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Answer 16

स्क्रॉल बार को छुपाने के लिए इस सीएसएस कोड को ग्राहक कोड में कॉपी करें:

<style>

    ::-webkit-scrollbar {
       display: none;
    }

    #element::-webkit-scrollbar {
       display: none;
    }

</style>

Answer 17

मेरा HTML इस प्रकार है:

<div class="container">
  <div class="content">
  </div>
</div>

divस्क्रॉलबार को छुपाने के लिए इसे अपने साथ जोड़ें :

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

और इस कंटेनर में जोड़ें

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Answer 18

वर्टिकल स्क्रॉल बार को अक्षम करने के लिए, बस जोड़ें overflow-y:hidden;।

इसके बारे में और अधिक जानकारी प्राप्त करें: अतिप्रवाह ।

Answer 19

overflow:hidden;JQuery का उपयोग करते समय मेरा उत्तर भी स्क्रॉल होगा :

उदाहरण के लिए, माउस व्हील के साथ क्षैतिज रूप से स्क्रॉल करें:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

Comments

स्क्रॉलजैकिंग काम करता है, लेकिन लगभग हमेशा एक खराब उपयोगकर्ता अनुभव होता है।

— ब्रैंडन अंजल्दी

जब यह संभव होता है, तो एक अच्छे उदाहरण के साथ, सहायक प्रौद्योगिकी उपयोगकर्ताओं के लिए बड़े पैमाने पर समस्याएं होती हैं जब आप स्क्रॉल को अक्षम करते हैं और स्क्रॉलिंग को संभालने के लिए जावास्क्रिप्ट का उपयोग करते हैं। यदि आप उपयोगकर्ता के लिए स्क्रॉल करते समय हर बार किसी तत्व पर ध्यान केंद्रित नहीं करते हैं, तो आपका एटी उपयोगकर्ता पूरी तरह से खो जाएगा। इसके अलावा, हर उपयोगकर्ता अब वह क्या देखता है पर सभी ठीक-ठीक नियंत्रण खो दिया है। अपने उपयोगकर्ता के लिए स्क्रॉल करने के लिए बहुत खराब UX। माउसव्हील के अलावा, आपको अप / डाउन कीज़, स्क्रीन रीडर रोटार, माउस क्लिक और टचपैड नियंत्रण भी संभालना होगा। यह डेवलपर के लिए अनिच्छुक और उपयोगकर्ता के लिए भयानक हो जाता है।

— शाइनिंगलाइट

Answer 20

मेरा मानना ​​है कि आप इसे overflowसीएसएस विशेषता के साथ हेरफेर कर सकते हैं , लेकिन उनके पास सीमित ब्राउज़र समर्थन है। एक सूत्र ने कहा कि यह इंटरनेट एक्सप्लोरर 5 (और बाद में), फ़ायरफ़ॉक्स 1.5 (और बाद में), और सफारी 3 (और बाद में) - शायद आपके उद्देश्यों के लिए पर्याप्त था।

स्क्रॉलिंग, स्क्रॉलिंग, स्क्रॉलिंग की अच्छी चर्चा है।

Comments

अच्छा लिंक। यह जानना अच्छा है कि मल्टी ब्राउज़र पर परिणाम कैसा है। दुर्भाग्य से समाप्त परिणामों के एक स्क्रीनशॉट के लिए आंकड़ा टूट गया है

— चेतबाहन

Answer 21

मैंने सब कुछ करने की कोशिश की और मेरे समाधान के लिए सबसे अच्छा काम किया हमेशा ऊर्ध्वाधर स्क्रॉलबार शो, और फिर इसे छिपाने के लिए कुछ नकारात्मक मार्जिन जोड़ें।

body {
  overflow-y: scroll;
  margin-right: -20px;
}