शरीर पर स्क्रॉल करना अक्षम करें


137

मैं HTML पर स्क्रॉलिंग को bodyपूरी तरह से अक्षम करना चाहूंगा । मैंने निम्नलिखित विकल्पों की कोशिश की है:

  • overflow: hidden; (काम नहीं कर रहा है, स्क्रॉलिंग को अक्षम नहीं किया है, यह सिर्फ स्क्रॉलबार छिपाया है)

  • position: fixed; (यह काम किया है, लेकिन यह पूरी तरह से शीर्ष पर स्क्रॉल किया गया है, जो इस विशिष्ट एप्लिकेशन के लिए अस्वीकार्य है)

मुझे इन दोनों विकल्पों में से कोई विकल्प नहीं मिल पा रहा था, क्या कोई और विकल्प है?


3
किस तत्व के लिए आपने ओवरफ्लो लागू किया: छिपा हुआ?
सजाद करुथेदथ

वास्तव में आप यहां क्या हासिल करना चाह रहे हैं? आपका अंतिम लक्ष्य क्या है?
jbutler483

2
प्रासंगिक कोड दिखाने से आपको मदद करने में आसानी होगी।
स्लीक गीक

1
छिपा हुआ सैलाब; जाने का रास्ता है। यदि यह काम नहीं कर रहा है तो आपको अपनी सीएसएस में कुछ अन्य समस्या है। Html की कोशिश करें, शरीर {अतिप्रवाह: छिपा हुआ;} अगर यह काम नहीं करता है तो * {अतिप्रवाह: छिपा हुआ;} और यह पता लगाने की कोशिश करें कि क्या गलत है
जोनास ग्रामेन

जवाबों:


245

सेट heightऔर overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/


3
"html," से पहले "बॉडी" के बारे में भूल गए।

2
IOS पर तब काम नहीं करना जब आपके पास कोई ओवरले एलिमेंट हो, जिसमें पोजिशन फिक्स हो।
notQ

1
आप बस "अतिप्रवाह" जोड़ सकते हैं: "छिपा हुआ" और यह ठीक काम करेगा।
JPG

यह समाधान मेरे लिए तुरंत काम नहीं करता था, लेकिन निरीक्षण के बाद "मार्जिन" कहीं न कहीं ओवरराइड हो रहा था। उस तत्व का "मार्जिन: 0;" चाल चली।
23

19

HTML css ठीक काम करता है अगर बॉडी टैग कुछ नहीं करता है तो आप भी लिख सकते हैं

<body scroll="no" style="overflow: hidden">

इस मामले में ओवरराइडिंग बॉडी टैग पर होनी चाहिए, इसे नियंत्रित करना आसान है लेकिन कभी-कभी सिरदर्द देता है।


21
यह मान्य नहीं है HTML5
mbomb007

@ mbomb007 क्या आप HTML5 से संबंधित गलती पर टिप्पणी कर सकते हैं?
एथन

5
@ ईथन टैग scrollपर विशेषता मान्य नहीं है <body>। यह किसी भी युक्ति पर मान्य नहीं है जिसे मैं पा सकता हूं। w3schools ; एमडीएन ; Quackit
mbomb007

14

यह पोस्ट मददगार थी, लेकिन बस एक मामूली विकल्प साझा करना चाहती थी जो दूसरों की मदद कर सके:

max-heightइसके बजाय सेटिंग heightभी ट्रिक करती है। मेरे मामले में, मैं क्लास टॉगल के आधार पर स्क्रॉलिंग को अक्षम कर रहा हूं। स्थापना .someContainer {height: 100%; overflow: hidden;}जब कंटेनर की ऊंचाई व्यूपोर्ट कंटेनर, जो नहीं होता जा क्या आप चाहते हैं खिंचाव होगा की तुलना में छोटा होता है। इसके max-heightलिए खाते सेट करना , लेकिन यदि कन्टैंट बदलने पर कंटेनर की ऊँचाई व्यूपोर्ट से अधिक है, तब भी स्क्रॉलिंग अक्षम करता है।


इसने स्क्रॉल-टॉप-टॉप के अवांछित दुष्प्रभाव के बिना डेस्कटॉप ब्राउज़रों के लिए मेरा दिन बचाया। लेकिन मोबाइल ब्राउज़र (iphone5s और android) पर काम नहीं किया।
बॉब

5

इसे पूरा करने के लिए, <body>तत्व पर 2 सीएसएस गुण जोड़ें ।

body {
   height: 100%;
   overflow-y: hidden;
}

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

तार


यह स्क्रॉलबार छुपाता है। हालाँकि, सवाल विशेष रूप से स्क्रॉलबार को छुपाने के लिए एक विकल्प के लिए पूछ रहा है
डेटागेक

@DataGeek, यह न केवल स्क्रॉलबार को छिपाता है, यह नीचे स्क्रॉल करने की क्षमता को भी रोकता है। और जैसा कि मैं समझता हूं कि जो मांगा गया था। यानी इसे न केवल छिपाया जा रहा है, बल्कि नीचे स्क्रॉल करना भी असंभव है।
bvdb
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.