ओवरफ्लो-एक्स: छिपी हुई सामग्री मोबाइल ब्राउज़रों में अतिप्रवाह से सामग्री को रोकती नहीं है

142

मेरे पास यहां एक वेबसाइट है ।

डेस्कटॉप ब्राउज़र में देखा गया, ब्लैक मेनू बार ठीक से केवल खिड़की के किनारे तक फैला हुआ है, क्योंकि bodyहै overflow-x:hidden।

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

यहां तक कि अगर मैं व्यूपोर्ट को एक विशिष्ट चौड़ाई में सेट करता हूं <head>:

<meta name="viewport" content="width=1100, initial-scale=1">

साइट 1100px तक विस्तारित है, लेकिन अभी भी 1100 के पार व्हाट्सएप है।

मैं क्या खो रहा हूँ? मैं 1100 तक व्यूपोर्ट कैसे रख सकता हूं और ओवरफ्लो को काट सकता हूं?

— Indigenuity
स्रोत

1

यह विशेष रूप से iOS9 में एक मुद्दा है

— चक ले बट

270

साइट रैपर डिव को अंदर बनाना <body>और overflow-x:hiddenउसके बजाय रैपर को लागू करना <body>या <html>समस्या को ठीक करना।

ऐसा प्रतीत होता है कि <meta name="viewport">टैग को पार्स करने वाले ब्राउज़र केवल और टैग की overflowविशेषताओं को अनदेखा करते हैं।htmlbody

नोट: आपको position: relativeरैपर div को भी जोड़ना पड़ सकता है ।

— Indigenuity
स्रोत

44

मैंने पाया कि करने के overflowलिए hidden, के अलावा , मैं करने के लिए सेट किया positionगया था fixed...

— विक्टर एस

16

स्थिर करने के लिए स्थिति जोड़ना मुझे स्क्रॉल करने में सक्षम होने से रोकता है!

— सिद्धांत

5

मैंने कोशिश की, मैंने अपना सारा कोड एक डिव के अंदर डाल दिया और इसे अतिप्रवाह-एक्स: छिपा दिया लेकिन काम नहीं कर रहा हूं, मैं <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-स्केल = 1"> जोड़ता हूं भी लेकिन कुछ भी नहीं बदला: / कोई विचार?

4

overflow-x: hiddenइस मेटा टैग को जोड़ने के बाद भी @leepowers मेरे लिए काम नहीं कर रहे हैं। क्या आप अपनी वेबसाइट का लिंक साझा कर सकते हैं जहां यह काम कर रहा है?

— बृहस्पतिवार

3

अरे गिरोह, जब मैंने पाया कि यह भी position:relativeकाम करता है।

— थॉमस वाल्डेज़

80

प्रयत्न

html, body {
  overflow-x:hidden 
}

इसके बजाय बस

body {
  overflow-x:hidden 
}

— subarachnid
स्रोत

7

धन्यवाद, लेकिन और / या किसी भी संयोजन में overflowकुछ भी करने के आवेदन से समस्या हल नहीं हुई। htmlbody

— स्वदेशी

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

— सबरचनीड

3

मेरे लिए काम किया। eduardd.eu/projects/ezo (480 और 992px पाद के बीच महिला और तौलिए की उस अतिप्रवाहित छवि के साथ एक समस्या थी)

— Eduard

2

क्या किसी को पता है कि यह क्यों काम करता है, जब शरीर {} और html {} को अलग से निर्दिष्ट नहीं करता है?

— हैमनेज़

1

height:100%;साथ ही जोड़ने की आवश्यकता है , अन्यथा लोडिंग छवियों वाले पृष्ठों पर वर्टिकल स्क्रॉल ठीक से काम नहीं करेगा (जिससे पृष्ठ ऊंचाई में बढ़ता है)।

— Arno van Oordt

69

स्वीकृत उत्तर पर विक्टर की टिप्पणी यह योग्य है कि यह स्वयं का उत्तर है क्योंकि यह एक बहुत ही सुंदर समाधान है जो वास्तव में काम करता है। और मैं इसकी उपयोगिता के लिए एक tad जोड़ूंगा।

विक्टर नोट जोड़ रहा है position:fixed काम करता है।

body.modal-open {
    overflow: hidden;
    position: fixed;
}

और वास्तव में यह करता है। हालांकि, इसमें शीर्ष पर अनिवार्य रूप से स्क्रॉल करने का एक मामूली पक्ष-प्रभाव भी है। position:absoluteइसे हल करता है लेकिन, मोबाइल पर स्क्रॉल करने की क्षमता को फिर से पेश करता है।

यदि आप अपना व्यूपोर्ट जानते हैं (व्यूपोर्ट जोड़ने के लिए मेरा प्लगइन<body> ) तो आप बस के लिए एक सीएसएस टॉगल जोड़ सकते हैं position।

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

जब मैं मोडल दिखा रहा / छुपा रहा हूँ तो अंतर्निहित पृष्ठ को बाएँ / दाएँ कूदने से रोकने के लिए इसे जोड़ता हूँ।

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

— चपटी कील
स्रोत

2

वहाँ वैसे भी मोबाइल हिस्सा पाने के लिए शीर्ष करने के लिए कूद नहीं है?

— व्रतकेनी

1

मेरे लिए जो काम किया गया था वह उस तत्व को मोड़ रहा था जिसे स्थिति से अतिप्रवाह द्वारा छिपाया जाना था: स्थिति से पूर्ण: निश्चित। शुक्र है।

— चक ले बट

1

@WraithKenny - यदि आप चाहते हैं कि पृष्ठ मोबाइल डिवाइस पर शीर्ष पर कूदने से रोके, तो आप निम्नलिखित hack'ish / ugly दृष्टिकोण का उपयोग कर सकते हैं। अपने मोडल फ़ंक्शन के अंदर, सुनिश्चित करें कि आप कुछ भी करने से पहले वर्तमान स्क्रॉल ऑफ़सेट प्राप्त करते हैं, मोडल स्टाइल को एक साथ लागू करते हैं और वर्तमान ऑफसेट के शून्य के बराबर अपने शरीर के शीर्ष मार्जिन को भी सेट करते हैं। सुनिश्चित करें कि जब आप मोडल को हटाते हैं, तो मार्जिन को 0 पर सेट करें और पृष्ठ को मूल ऑफसेट पर वापस स्क्रॉल करें।

— एमिल बोरकोनी

2

यह समाधान केवल आपके मॉडल की सामग्री स्क्रीन में फिट होने की स्थिति में काम करता है, अर्थात आपको स्वयं मोडल को स्क्रॉल करने की आवश्यकता नहीं है।

— टॉबी

मेरे पेज पर अन्य निश्चित और निरपेक्ष रूप से तैनात तत्व हैं। शरीर को position:fixed or absoluteपरेशान करने के साथ-साथ उनकी स्थिति भी। मेरे मामले में उपयुक्त नहीं / काम कर रहा है :(

— सोहैबी

31

सफारी में हॉरिज़ॉन्टल स्क्रॉलिंग को हल करने का यह सबसे सरल उपाय है।

html, body {
  position:relative;
  overflow-x:hidden;
}

— वाल्टूर बुर्क
स्रोत

1

यह काम करने लगता है। लेकिन क्या आपके पास एक स्पष्टीकरण है कि यह क्यों काम करता है?

— लार्स

नहीं, यह अंत में काम नहीं किया। मैंने गणित करना समाप्त कर दिया और सुनिश्चित किया कि div ने अनुमति की तुलना में व्यापक नहीं है, सीएसएस कैल्क () ने मुझे यहां बहुत मदद की क्योंकि यह सापेक्ष चौड़ाई (vw या%) और पूर्ण चौड़ाई (px) के मिश्रण की अनुमति देता है।

— लार्स

बेशक यह एक वर्कअराउंड की चीज है। अभी भी कहीं न कहीं कुछ बह निकला है, बस अब कट गया है। एक सीएसएस नियम जोड़ने का प्रयास करें: * {रूपरेखा: 1 पीएक्स ठोस लाल; } यदि आप अभी भी अतिप्रवाह तत्व नहीं खोज सकते हैं, तो यह संभवतः एक मार्जिन के कारण होता है। * {मार्जिन: 0 जोड़ने का प्रयास करें! महत्वपूर्ण } और देखें कि क्या अतिप्रवाह गायब हो जाता है।

— वॉल्टुर बुर्क

मेरे लिये कार्य करता है। दिलचस्प है कि छिपे हुए तत्व शरीर की चौड़ाई को बदलते हैं। मेरे लिए, हालांकि, सभी सफारी ब्राउज़रों के लिए यही मामला है, न केवल मोबाइल वालों के लिए। बस एक बूटस्ट्रैप 4 table-responsiveबग को ठीक करना था । यही समाधान था।

— CunningFatalist

2

मैं विश्वास नहीं कर सकता यह 2019 में अभी भी एक समस्या है। लेकिन ऊपर दिए गए समाधान पूरी तरह से काम करते हैं। धन्यवाद।

— स्थिर

28

जैसा कि @Indigenuity बताता है, यह <meta name="viewport">टैग पार्स करने वाले ब्राउज़रों के कारण प्रतीत होता है ।

स्रोत पर इस समस्या को हल करने के लिए, निम्नलिखित प्रयास करें:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">।

मेरे परीक्षणों में यह उपयोगकर्ता को ओवरफ्लो की गई सामग्री को देखने के लिए ज़ूम इन करने से रोकता है, और परिणामस्वरूप पैनिंग / स्क्रॉलिंग को भी रोकता है।

— Tempurturtul
स्रोत

initial-scale=1मौजूदा व्यूपोर्ट मेटाटैग में जोड़ने से समस्या ठीक हो जाती है। धन्यवाद!

— जेम्सविलसन

6

मेरे लिए यह minimum-scale=1तय था कि यह

— jpenna

यह वही है जो वास्तव में मेरे लिए सब कुछ करने की कोशिश करने के बाद काम किया। आपका बहुत बहुत धन्यवाद !

— हर्ष लिमये

16

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

iOS9 पर काम करता है

— ollio
स्रोत

3

यह काम करता है, लेकिन स्थिति: आपके शरीर के लिए निर्धारित करने से आप शीर्ष पर स्क्रॉल करते हैं

— ThaoD5

1

अजीब है, लेकिन यह मेरे लिए निश्चित स्थिति के बिना भी काम करता है। यहाँ सभी समाधानों में से केवल एक!

— गरवानी

केवल एक जिसने मेरे लिए काम किया, क्रोम और बूस्टर + कोणीयज का उपयोग करके

— kiwicomb123

6

व्यूपोर्ट को अछूता रखें: <meta name="viewport" content="width=device-width, initial-scale=1.0">

मान लें कि आप दाईं ओर एक निरंतर काली पट्टी का प्रभाव प्राप्त करना चाहते हैं: 100%#menubar से अधिक नहीं होना चाहिए , सीमा त्रिज्या को समायोजित करें जैसे कि दाहिनी ओर वर्ग को समायोजित किया जाए और गद्दी को समायोजित किया जाए ताकि यह थोड़ा और सही तक फैले । निम्नलिखित को संशोधित करें :#menubar

border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/

समायोजित कर रहा है padding10px के पाठ्यक्रम लिए बाएँ मेनू को पट्टी के किनारे पर छोड़ देता है, आप शेष 40px को प्रत्येक में li, 20px को बाईं और दाईं ओर रख सकते हैं :

.menuitem {
display: block;
padding: 0px 20px;
}

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

— ऐनी
स्रोत

यदि आप उपयोग box-sizing: border-box;करते हैं तो आप 100% चौड़ाई div में पैडिंग जोड़ सकते हैं।

— चार्ल्स जॉन थॉम्पसन III

6

शरीर के अंदर एक साइट रैपर div बनाना और ओवरफ्लो को लागू करना-> x: शरीर के रैपर INSTEAD में छिपा हुआ या html ने समस्या को ठीक किया।

position: relativeरैपर में जोड़ने के बाद मेरे लिए यह काम किया ।

— इसहाक एफ
स्रोत

इसने मेरे लिए काम किया। साइड इफेक्ट यह था कि मुझे एक के बजाय दो स्क्रॉल बार मिले हैं। इसका हल इसके overflow: hiddenबजाय बनाना था overflow-x: hidden। OSX और विन पर मोबाइल सफारी, क्रोम, IE11 पर काम करता है।

— पॉप

4

<div>आपकी सामग्री की संपूर्णता के चारों ओर एक आवरण जोड़ना वास्तव में काम करेगा। शब्दशः "इिकी" के दौरान, मैंने ओवरव्यू के एक वर्ग के साथ एक div जोड़ा, जो कि bodyटैग के अंदर होता है और फिर अपने CSS को इस तरह सेट करता है:

html, body, .overflowWrap {
overflow-x: hidden;
}

अब ओवरकिल हो सकता है, लेकिन एक आकर्षण की तरह काम करता है!

— MBurnette
स्रोत

4

मुझे Android उपकरणों के साथ समान समस्या का सामना करना पड़ा, लेकिन iOS उपकरणों के साथ नहीं। स्थिति निर्दिष्ट करके हल करने का प्रबंधन: पूरी तरह से तैनात तत्वों के बाहरी div में रिश्तेदार (अतिप्रवाह के साथ: बाहरी div के लिए छिपा हुआ)

— क्वोक पान फंग
स्रोत

4

किसी भी पिछले एकल समाधान ने मेरे लिए काम नहीं किया, मुझे उन्हें मिश्रण करना पड़ा और इस मुद्दे को पुराने उपकरणों (आईफोन 3) पर भी ठीक कर दिया।

सबसे पहले, मुझे HTML सामग्री को एक बाहरी div में लपेटना था:

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

तब मुझे रैपर पर छिपे ओवरफ्लो को लागू करना पड़ा, क्योंकि ओवरफ्लो-एक्स काम नहीं कर रहा था:

  #wrapper {
    overflow: hidden;
  }

और यह मुद्दा तय किया।

— spaghetticode
स्रोत

यह @ स्वदेशीता के उत्तर से कैसे भिन्न है?

— इयान केम्प

3

@ian केम्प ओवरफ़्लो: छिपा हुआ! = अतिप्रवाह-एक्स: छिपा हुआ

— स्पेगेटीकोड

3

मैंने अतिप्रवाह-एक्स का उपयोग करके समस्या को हल किया: छिपी; निम्नलिखित नुसार

@media screen and (max-width: 441px){

#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
  overflow-x: hidden;
   }
 }

संरचना इस प्रकार है

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

— vikas etagi
स्रोत

3

जैसा कि subarachnid ने कहा कि अतिप्रवाह-एक्स शरीर और HTML दोनों के लिए छिपा हुआ है

**HTML**
<div class="contener">
  <div class="menu">
  das
  </div>
  <div class="hover">
    <div class="img1">
    First Strip
    </div>
     <div class="img2">
    Second Strip
    </div>
</div>
</div>
<div class="baner">
dsa
</div>

**CSS**
body, html{
  overflow-x:hidden;
}
body{
  margin:0;
}
.contener{
  width:100vw;
}
.baner{
   background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
   width:100vw;
   height:400px;
   margin-left:0;
   left:0;
}
.contener{
  height:100px;
}
.menu{
  display:flex;
  background-color:teal;
  height:100%;
  justify-content:flex-end;
  align:content:bottom;
}
.img1{
  width:150px;
  height:25px;
  transform:rotate(45deg);
  background-color:red;
  position:absolute;
  top:40px;
  right:-50px;
  line-height:25px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  text-align:center;
  transition:all 0.4s;
}
.img2{
  width:190px;
  text-align:center;
  transform:rotate(45deg);
  background-color:#333;
  position:absolute;
  height:25px;
  line-height:25px;
  top:55px;
  right:-50px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  transition:all 0.4s;
}
.hover{
  overflow:hidden;
}
.hover:hover .img1{
  background-color:#333;
  transition:all 0.4s;
}
.hover:hover .img2{
  background-color:blue;
  transition:all 0.4s;
}

संपर्क

— स्काईलिन आर
स्रोत

1

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

#all-wrapper {
  overflow: hidden;
}

बस यह पर्याप्त था, शरीर या HTML तत्वों पर कुछ भी सेट किए बिना।

— highfellow
स्रोत

1

मैंने इस विषय में उत्तरों से कई तरीकों की कोशिश की थी, ज्यादातर काम करता है लेकिन कुछ साइड-इफ़ेक्ट मिला जैसे अगर मैं ओवरफ्लो-एक्स का उपयोग करता हूं body,html पेज को धीमा कर सकता है जब उपयोगकर्ता मोबाइल पर स्क्रॉल करते हैं।

उपयोग position: fixedशरीर के अंदर रैपर / डिव का बहुत अच्छा है, लेकिन जब मेरे पास मेनू होता है और जावास्क्रिप्ट का उपयोग करते हैं तो कुछ अनुभाग पर एनिमेटेड स्क्रॉल क्लिक करें, यह काम नहीं कर रहा है।

इसलिए, मैंने touch-action: pan-y pinch-zoomशरीर के अंदर रैपर / डिव का उपयोग करने का निर्णय लिया । समस्या सुलझ गयी।

— जिरयु एल
स्रोत

0

मेरे बूटस्ट्रैप मोडल (फ़ॉर्म से युक्त) के लिए इस समस्या को ठीक करने का एकमात्र तरीका मेरे सीएसएस में निम्नलिखित कोड जोड़ना था:

.modal {
    -webkit-overflow-scrolling: auto!important;
}

— टोबियास
स्रोत