ओवरफ्लो करता है: iPhone सफारी पर <body> काम करने के लिए छिपाया गया?

131

क्या iPhone सफारी पर काम overflow:hiddenकरने के लिए आवेदन किया जाता है <body>? ऐसा नहीं लगता है। मैं इसे प्राप्त करने के लिए पूरी वेबसाइट पर एक आवरण नहीं बना सकता ...

क्या आप इसका समाधान जानते हैं?

उदाहरण: मेरे पास एक लंबा पृष्ठ है, और बस मैं उस सामग्री को छिपाना चाहता हूं जो "गुना" के नीचे जाती है, और इसे आईफोन / आईपैड पर काम करना चाहिए।

— फ्रांसेस्को
स्रोत

1

अपने आप को इसका जवाब खोजने के लिए सख्त खोज।

— mwilcox

115

मेरे पास एक समान मुद्दा था और मैंने पाया कि overflow: hidden;दोनों पर लागू होने htmlऔर bodyमेरी समस्या हल हो गई।

html,
body {
    overflow: hidden;
}

IOS 9 के लिए, आपको इसके बजाय इसका उपयोग करने की आवश्यकता हो सकती है: (धन्यवाद चेनू!)

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

— एलेक्स हास
स्रोत

12

यह iOS सफारी पर काम नहीं करता है। स्थिति: रिश्तेदार भी आवश्यक है।

— केविन बॉर्डर्स

5

हां, HTML + body में रिश्तेदार और अतिप्रवाह दोनों को जोड़ दें

— wutang

3

यह iOS 9 पर काम नहीं करता है, यहां तक कि शरीर और HTML पर स्थिति सापेक्ष का उपयोग करते हुए भी

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

1

चेतावनी का एक शब्द, <html> टैग पर छिपा हुआ अतिप्रवाह, jQuery की स्क्रॉल ईवेंट को तोड़ देगा

— ब्रेट ग्रेगॉन

2

यह मेरे लिए iOS 9, सफारी पर काम नहीं करता है। शरीर अभी भी स्क्रॉल करने योग्य है, जोड़ने के बाद भी position: relative।

— ईदो

87

body {
  position:relative; // that's it
  overflow:hidden;
}

— laFunk
स्रोत

3

धन्यवाद। आप। मेरे पास एक बड़ा मुद्दा था जब तत्वों को व्यूपोर्ट के बाहर से अंदर तक संक्रमण किया जा रहा था। एक अजीब बग होता है जहां सामग्री बढ़ जाती है। यह मेरे लिए समाधान था!

— एरिक

48

मेरे मामले में "स्थिति: रिश्तेदार" जोड़ने में मदद नहीं की, लेकिन "स्थिति: निश्चित" जोड़ने से काम किया।

— लीस्टऑन

1

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

— चांदनीत 7

रैपर कहां जाता है? यह पूरा उत्तर कैसे है?

— कुगेल

8

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

— माइक

27

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

body.lock-position {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

स्रोत: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body

— डेवी
स्रोत

4

यह अच्छा है (मेरे मामले में बेहतर काम करता है position: relative) हालांकि, डिफ़ॉल्ट स्टाइल (जैसे समापन मेनू) को पुनर्स्थापित करने के बाद स्क्रॉल स्थिति खो जाती है।

— जमरकेली

1

स्क्रॉल स्थिति के लिए आप js (इस उदाहरण में jquery) का उपयोग कुछ इस तरह से कर सकते हैं:

// on menu open   // save window pos   $('body').attr( 'data-pos', $(window).scrollTop() ) ;   // ...   // on menu close   // scroll to saved window pos   $( window ).scrollTop( $('body').attr( 'data-pos' ) );

— डेवी

कि वास्तव में मेरे लिए टिक किया था!

— 19

8

IOS 8 & 9 पर आज यह मुद्दा था और ऐसा लगता है कि अब हमें ऊंचाई जोड़ने की आवश्यकता है: 100%;

इसलिए जोड़ दें

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}

— chaenu
स्रोत

4

उत्तर और टिप्पणियों को यहाँ और इसी तरह के प्रश्न के संयोजन ने मेरे लिए काम किया।

इसलिए पूरे उत्तर के रूप में पोस्टिंग।

यहां बताया गया है कि आपको <body>टैग के अंदर अपनी साइट की सामग्री के चारों ओर एक रैपर div कैसे डालना है ।

 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- other meta and head stuff here -->
 <head>
 <body>
     <div class="wrapper">
         <!-- Your site content here -->
     </div>
 </body>
 </html>

नीचे के रूप में आवरण वर्ग बनाएँ।

.wrapper{
    position:relative; //that's it
    overflow:hidden;
}

मुझे इस उत्तर का विचार भी यहाँ से मिला ।

और यहाँ इस जवाब को भी कुछ खाने के लिए मिला है। कुछ ऐसा जो संभवतः डेस्कटॉप और डिवाइस दोनों में समान रूप से अच्छा काम करेगा।

— देवराज गढ़वी
स्रोत

मेरे लिए यही समाधान था।

— Roel Magdaleno

1

यह पृष्ठ मेरे लिए शीर्ष पर स्क्रॉल करने का कारण बनता है जब मोडल बंद हो जाता है।

— जेसन

4

सफारी ब्राउजर में इसका काम कर रहा है।

html,
body {
  overflow: hidden;
  position: fixed
}

— श्रीधर
स्रोत

4

मेरे लिए यह:

height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

पर्याप्त नहीं था, मैं सफारी पर iOS पर काम नहीं किया। मुझे भी जोड़ना था:

top: 0;
left: 0;
right: 0;
bottom: 0;

इसे अच्छा बनाने के लिए। अब ठीक काम करता है :)

— Loosie94
स्रोत

2

मैंने साथ काम किया है <body>और<div class="wrapper">

जब पॉपअप खुल जाता है ...

<body> 100% की ऊंचाई और एक अतिप्रवाह मिलता है: छिपा हुआ

<div class="wrapper"> स्थिति मिलती है: सापेक्ष; अतिप्रवाह: छिपी हुई; ऊँचाई: 100%;

मैं पृष्ठ के वास्तविक स्क्रॉलपॉइंट को प्राप्त करने के लिए JS / jQuery का उपयोग करता हूं और मान को डेटा-शरीर के रूप में संग्रहीत करता हूं

तो मैं स्क्रॉल करने के लिए स्क्रॉल । आवरण DIV (विंडो में नहीं)

यहाँ मेरा समाधान है:

जे एस / jQuery:

// when popup opens

$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos

// when popup close

$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));

सीएसएस:

body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}

यह दोनों तरफ अच्छा काम करता है ... डेस्कटॉप और मोबाइल (आईओएस)।

Tipps और सुधार का स्वागत है :)

चीयर्स!

— toge
स्रोत

1

html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

इसे अपने सीएसएस में डिफ़ॉल्ट के रूप में जोड़ें

.class-on-html{
  position:fixed;
  top:0px;
  left:0px;
  overflow:hidden;
  height:100%;
}

पृष्ठ काटने के लिए इस वर्ग को टॉगल करें

जब आप इस क्लास को बंद करेंगे तो पहली लाइन स्क्रॉलिंग बार को वापस बुलाएगी

— Longwinter
स्रोत

0

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

— ली मैकलि
स्रोत

10

क्या आप इसके बारे में अधिक विस्तार से जा सकते हैं, या किसी स्रोत का हवाला दे सकते हैं? यह उत्तर सही हो सकता है, लेकिन यह बहुत उपयोगी नहीं है।

— प्रातः

0

यह लागू होता है, लेकिन यह केवल DOM के भीतर कुछ तत्वों पर लागू होता है। उदाहरण के लिए, यह किसी तालिका, td, या कुछ अन्य तत्वों पर काम नहीं करेगा, लेकिन यह <DIV> टैग पर काम करेगा।
उदाहरण के लिए:

<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

केवल आईओएस 4.3 में परीक्षण किया गया।

एक मामूली संपादन: आप अतिप्रवाह का उपयोग करके बेहतर हो सकते हैं: स्क्रॉल करें ताकि दो उंगली-स्क्रॉलिंग काम करें।

— एडम
स्रोत

0

उस सामग्री को क्यों न लपेटें जिसे आप कक्षा में एक तत्व के साथ नहीं दिखाना चाहते हैं और उस वर्ग को display:noneएक स्टाइलशीट में सेट करें जिसका मतलब केवल आईफोन और अन्य हैंडहेल्ड डिवाइसों के लिए है?

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->

— S16
स्रोत

0

यहाँ मैंने क्या किया है: मैं शरीर की स्थिति की जांच करता हूं, फिर शरीर को स्थिर कर देता हूं और उस स्थिति के नकारात्मक को शीर्ष पर समायोजित करता हूं। रिवर्स पर, मैं शरीर को स्थिर बनाता हूं और स्क्रॉल को उस मूल्य पर सेट करता हूं जिसे मैंने पहले रिकॉर्ड किया था।

var body_x_position = 0;

function disable_bk_scrl(){

    var elb = document.querySelector('body');

    body_x_position = elb.scrollTop;
    // get scroll position in px

    var body_x_position_m = body_x_position*(-1);
    console.log(body_x_position);

    document.body.style.position = "fixed";

    $('body').css({ top: body_x_position_m });

}

function enable_bk_scrl(){  

    document.body.style.position = "static";

    document.body.scrollTo(0, body_x_position);

    console.log(body_x_position);
}

— ऐरी एस।
स्रोत

-3

बस बॉडी हाइट बदलें <300px (लैंडस्पेस पर मोबाइल व्यूपोर्ट की ऊंचाई लगभग 300px से 500px है)

जे एस

$( '.offcanvas-toggle' ).on( 'click', function() {
    $( 'body' ).toggleClass( 'offcanvas-expanded' );
});

सीएसएस

.offcanvas-expended { /* this is class added to body on click */
    height: 200px;
}
.offcanvas {
    height: 100%;
}

— क्रिश्चियन लेपी
स्रोत

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

— बदरुश