दिलचस्प पोस्ट
कतार में अगली फाइल खेलने में कोई देरी से बचने के लिए कतार में एमपी 3 फाइल प्रीलोड करें पुराने ब्राउज़रों के लिए HTML5 के "डेटा- *" विशेषताओं का उपयोग करने में कोई समस्या है? तार्किक और सशर्त और, और सी # में अंतर क्या है? अपाचे डर्बी ग्रहण प्लग-इन कहाँ गए थे? एंड्रॉइड 4.0, एक्शन बार पर पाठ कभी नहीं दिखाता है पंक्ति संख्या प्रति समूह mysql में क्या कंसट्रक्टर फ़ंक्शन को वादा करने के लिए बुरा अभ्यास है? उद्देश्य-सी / कोको के साथ एक मैक ऐप लॉन्च करना एक व्युत्पन्न वर्ग में संरक्षित सदस्यों तक पहुंच कैसे स्क्रॉल दिशा का पता लगाने के लिए UTF-8 एन्कोडेड डेटा को सर्वर पर कुछ वर्ण खो देता है कैसे एक MySQL पंक्ति को पढ़ने के लिए केवल सेट करें? पृष्ठ पुनः लोड पर मैं jqGrid में खोज फ़िल्टर कैसे सुरक्षित रख सकता हूं? डेटा में पंक्तियों को खोजने के लिए दो डेटा.फ्रेम की तुलना करें.फ्रेम 1 जो आंकड़ों में मौजूद नहीं है। फ़्रेम 2 अगर मैं सी या सी ++ में एक `टाइप टाइपफे` करता हूं, तो टाइपिंगफ़ाइड प्रकार के अंत में मुझे` _t` कब जोड़ना चाहिए?

एक HTML पृष्ठ पर स्क्रॉलबार छिपा रहा है

क्या सीएसएस को स्क्रॉल-बार छिपाने के लिए इस्तेमाल किया जा सकता है? आप यह कैसे करेंगे?

Solutions Collecting From Web of "एक HTML पृष्ठ पर स्क्रॉलबार छिपा रहा है"

overflow: hidden; सेट करें 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> 

अद्यतन: मुझे छिपा हुआ मतलब था, खेद है, बस जाग उठा 🙂


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

पूर्णता के लिए, यह वेबकिट के लिए काम करता है:

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

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

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

मुझे पुनर्स्थापना के बारे में निश्चित नहीं है – यह काम करता है, लेकिन ऐसा करने का सही तरीका हो सकता है:

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

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

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

 .content { /* These rules create an artificially confined space, so we get a scrollbar that we can hide. They are not part of the hiding itself. */ border: 1px dashed gray; padding: .5em; white-space: pre-wrap; height: 5em; overflow-y: scroll; } .content::-webkit-scrollbar { /* This is the magic bit */ 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> 

हां, इस प्रकार का ..

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

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

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

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

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

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

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

 body, html { /* these are default, can be replaced by hex 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; } 

IE8 के रूप में ये गुण माइक्रोसॉफ्ट द्वारा प्रीफ़िक्सेल विक्रेता थे लेकिन वे अभी भी डब्ल्यू3 सी द्वारा अनुमोदित नहीं थे

 -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 

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

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

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

यह भी ध्यान देने योग्य है कि जब .NET के साथ काम करते हैं तो सिस्टम में स्क्रॉलबार वर्ग.विंडो। नियंत्रण। प्रस्तुति ढांचे में प्रायः स्क्रॉलबारों के लिए जिम्मेदार है

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

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

वेबकिट

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

 ::-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 हैंडलर)

एक विंडो जोड़ता है। ScrollEvent हैंडलर
पैरामीटर:
हेन्डलर – हैंडलर
यह दिखाता है:
हैंडलर पंजीकरण देता है
[ स्रोत ] ( 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 अतिप्रवाह- y के समान
  • -moz-hidden-unscrollable केवल एक उपयोगकर्ता प्रोफ़ाइल सेटिंग्स के भीतर आंतरिक रूप से काम करता है XML रूट तत्वों को स्क्रॉल करने और वेब पृष्ठों को स्क्रॉल करने के लिए तीर कुंजियों और माउस व्हील का उपयोग करने से अक्षम कर देता है।

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

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

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

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

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

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

यहां छवि विवरण दर्ज करें


इतिहास पाठ

स्क्रॉलबार

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

कई तरह का

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

scrollbar बारप्रॉप ऑब्जेक्ट window ऑब्जेक्ट का बच्चा है और उपयोगकर्ता इंटरफ़ेस तत्व का प्रतिनिधित्व करता है जिसमें एक स्क्रॉलिंग तंत्र या कुछ समान इंटरफ़ेस अवधारणा शामिल है। window.scrollbars.visible .scrollbars। यदि स्क्रॉल सलाखों के दृश्यमान हैं तो 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 scrollrestoration की स्थिति की जांच या इसकी स्थिति को बदलने के लिए इस्तेमाल किया जा सकता है (ऐडिंग ="auto"/"manual" ऑटो डिफ़ॉल्ट मान है। इसे मैनुअल में बदलने का अर्थ है कि आप डेवलपर के रूप में किसी भी व्यक्ति का स्वामित्व लेंगे स्क्रॉल परिवर्तन की आवश्यकता हो सकती है जब कोई उपयोगकर्ता ऐप के इतिहास को पार करता है। यदि आप की आवश्यकता है, तो आप इतिहास की प्रविष्टियों को पुशस्टेट () के साथ पुश करने पर स्क्रॉल की स्थिति का ट्रैक रख सकते हैं।

आगे की पढाई:

  • विकिपीडिया पर स्क्रॉलबार
  • स्क्रॉल बार (विंडोज़)
  • स्क्रॉल मेथड
  • स्क्रॉल मेथड – माइक्रोसॉफ्ट देव नेटवर्क
  • गिथूब पर iScroll (उपरोक्त पहले खंड में संदर्भित)
  • जेकोब नेल्सन द्वारा स्क्रॉलिंग और स्क्रॉलबार प्रयोज्यता के बारे में एक लेख

उदाहरण

  • बिना स्क्रॉल वाले स्वतंत्र स्क्रॉलिंग पैनल (सिर्फ सीएसएस का उपयोग करके) – बेन फ्रेन (10-21-2014)

आप इसे एक आवरण डिवा के साथ पूरा कर सकते हैं, जो इसे अतिप्रवाह छिपा हुआ है, और आंतरिक डिवा को ऑटो पर सेट किया गया है

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

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; } 

-ms-overflow-style ::-webkit-scrollbar साथ संयोजन के साथ आप सीएसएस प्रॉपर्टी overflow और -ms-overflow-style उपयोग कर सकते हैं।

IE10 +, फ़ायरफ़ॉक्स, सफारी और क्रोम पर परीक्षण किया गया और अच्छा काम करता है:

 .container { -ms-overflow-style: none; // IE 10+ overflow: -moz-scrollbars-none; // Firefox } .container::-webkit-scrollbar { display: none; // Safari and Chrome } 

जब आप स्क्रैपबार को padding-right छिपाते हैं, तो यह दूसरों की तुलना में बेहतर समाधान होता है, क्योंकि प्रत्येक ब्राउज़र पर डिफ़ॉल्ट स्क्रॉलबार चौड़ाई अलग होती है।

नोट: फ़ायरफ़ॉक्स के नवीनतम संस्करण में -moz-scrollbars-none संपत्ति नापसंद ( लिंक ) है

मुझे लगता है कि मुझे तुम्हारे लिए एक काम मिल गया है यदि आप अभी भी रुचि रखते हैं यह मेरा पहला सप्ताह है लेकिन यह मेरे लिए काम किया ..

 <div class="contentScroller"> <div class="content"> </div> </div> .contentScroller {overflow-y: auto; visibility: hidden;} .content {visibility: visible;} 

यदि आप मोबाइल डिवाइस के लिए स्क्रॉलबार को छिपाने के लिए समाधान ढूंढ रहे हैं, तो पीटर का जवाब देखें !

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

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

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

जैसा कि अन्य लोगों ने पहले से ही कहा है, सीएसएस ओवरफ्लो का उपयोग करें

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

सीएसएस अतिप्रवाह संपत्ति का उपयोग करें:

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

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

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

परीक्षण एज, क्रोम, फ़ायरफ़ॉक्स, सफारी

जबकि माउस पहिया के साथ स्क्रॉल करने में सक्षम होने पर स्क्रॉलबार छुपाएं! 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; } 

बस सोचा कि मैं इस प्रश्न को पढ़ रहा हूं कि किसी अन्य व्यक्ति को यह कहना चाहिए कि ओवरफ्लो सेट करना: शरीर के तत्व पर छुपा (या अतिप्रवाह- y) मेरे लिए स्क्रॉलबार छिपाए नहीं था मुझे HTML तत्व का उपयोग करना था

पीटर के उत्तर के अलावा:

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

यह IE10 के लिए समान कार्य करेगा:

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

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

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

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

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

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

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

मेरे SASS क्षमा करें; पी

 %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; } 

परिक्षण

ओएस एक्स 10.6.8 है। विंडोज़ विंडोज 7 है

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

मेरा जवाब भी जब 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> 

मेरे एचटीएमएल इस तरह से है

 <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%; } 

ऊर्ध्वाधर स्क्रॉल पट्टी को अक्षम करने के लिए बस जोड़: overflow-y:hidden;

के बारे में और अधिक खोजें: अतिप्रवाह

मैंने कुछ विकल्प के साथ एक वेबकिट संस्करण लिखा था, जैसे कि ऑटो छिपाना , छोटा संस्करण , केवल-वाई या सिर्फ-एक्स स्क्रॉल करें

 ._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

मेरा मानना ​​है कि आप इसे अतिप्रवाह सीएसएस विशेषता के साथ हेरफेर कर सकते हैं, लेकिन उनके पास सीमित ब्राउज़र समर्थन है एक स्रोत ने कहा कि यह आईई 5 +, फ़ायरफ़ॉक्स 1.5+ और सफ़ारी 3+ था – शायद आपके प्रयोजनों के लिए पर्याप्त है

इस लिंक की अच्छी चर्चा है: http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/