मैं IE10 में स्क्रॉल ओवरलेिंग सामग्री को कैसे रोक सकता हूं?

Question

IE10 में, स्क्रॉलबार हमेशा नहीं होता है ... और जब यह दिखाई देता है तो यह ओवरले के रूप में आता है ... यह एक अच्छी सुविधा है लेकिन मैं इसे अपनी विशिष्ट वेबसाइट के लिए बंद करना चाहूंगा क्योंकि यह एक पूर्ण स्क्रीन अनुप्रयोग है और मेरी लोगो और मेनू इसके पीछे खो जाते हैं।

IE10:

CHROME:

किसी को हमेशा IE10 पर स्थिति में तय स्क्रॉलबार होने का एक तरीका पता है?

ओवरफ्लो-वाई: स्क्रॉल काम नहीं करता है! यह बस इसे स्थायी रूप से मेरी वेबसाइट पर रखता है।

यह बूटस्ट्रैप समस्या का कारण हो सकता है लेकिन मुझे कौन सा हिस्सा पता नहीं है! यहाँ उदाहरण देखें: http://twitter.github.io/bootstrap/

Comments

मेरे IE10 में यह व्यवहार नहीं है, क्या आप इसे "मेट्रो" ऐप के रूप में चला रहे हैं?

— xec

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

— Jimmyt1988

क्या पेज की एक निर्धारित चौड़ाई के साथ कुछ करना है?

— एल्बी

पृष्ठ की चौड़ाई सेट करने से काम चल जाएगा .. अफसोस, मैं सोच रहा था कि क्या कोई क्रॉस ब्राउज़र तरीका है। फायरफॉक्स, सफारी और क्रोम को देखते हुए यह व्यवहार नहीं है। मैं एक IE10 विशिष्ट doo-raggy का उपयोग कर सकता हूँ मुझे लगता है .. बस सबसे सुरुचिपूर्ण उत्तर की तरह प्रतीत नहीं होता है।

— जिममिथ

@JamesT मैं w8 पर भी हूं, लेकिन कोई भी ऐसा पेज नहीं पा रहा है, जो IE10 स्क्रॉलबार को ओवरले के रूप में प्रस्तुत करे (मेरे जाने के लिए भी परीक्षण पृष्ठ नहीं, www.arngren.net)

— xec

Answer 1

थोड़ी सी गुगली करने के बाद, मैं एक चर्चा में लड़खड़ा गया जहाँ एक टिप्पणी "ब्लू इंक" द्वारा छोड़ी गई थी:

पृष्ठों का निरीक्षण करके, मैं इसका उपयोग करके पुन: पेश करने में कामयाब रहा:

@ -ms-viewport {चौड़ाई: डिवाइस-चौड़ाई; }

जो स्क्रॉलबार को पारदर्शी बनाता है। समझ में आता है, क्योंकि सामग्री अब पूरी स्क्रीन को लेती है।

इस परिदृश्य में, जोड़ना:

ओवरफ्लो-वाई: ऑटो;

स्क्रॉलबार को स्वतः छुपाता है

और बूटस्ट्रैप्स उत्तरदायी-यूटिलिटीज। फाइल में, लाइन 21 पर आप निम्नलिखित सीएसएस कोड पा सकते हैं

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

यह स्निपेट व्यवहार का कारण है। मैं ऊपर दिए गए टिप्पणी कोड में सूचीबद्ध लिंक को पढ़ने की सलाह देता हूं। (शुरू में इस उत्तर को पोस्ट करने के बाद उन्हें जोड़ा गया।)

Comments

आप, श्रीमान, सज्जन और विद्वान हैं! मैंने @ -ms-viewport {चौड़ाई: ऑटो महत्वपूर्ण! } मेरी css फ़ाइल में और समस्या दूर हो गई: D

— Jimmyt1988

महान जवाब, मैं दूसरों को सुझाव दूंगा कि आप बूटस्ट्रैप की टिप्पणी में संदर्भित लेख पढ़ें: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design - बूटस्ट्रैप से उस कोड को हटाने से IE10 जवाबदेही टूट सकती है विंडोज 8 मेट्रो

— tmsimont

@tmsimont अच्छी बात है। इसके अलावा, उन्होंने नवीनतम Boostrap स्रोत फ़ाइल (नई टिप्पणियों के साथ मेरा उत्तर अपडेट किया गया) में टिप्पणी को बदल दिया है, जिसमें अब " केवल भूतल / डेस्कटॉप विंडोज 8" पर यह लागू करने के लिए एक यूए सूँघने वाली स्क्रिप्ट के उपयोग का उल्लेख है - जांच इस मुद्दे को लिंक करें github.com/twbs/bootstrap/issues/10497

— xec

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

— डेविड

-ms-overflow-style: स्क्रॉलबार; लगता है क्लीनर समाधान (दूसरा जवाब देखें)।

— मैनुएल ने श्मिट

Answer 2

जैसा कि xec ने अपने उत्तर में बताया है, यह व्यवहार @ -ms-viewport सेटिंग के कारण होता है।

अच्छी खबर यह है कि आपको स्क्रॉलबार वापस लाने के लिए इस सेटिंग को हटाने की आवश्यकता नहीं है (हमारे मामले में हम उत्तरदायी वेब डिज़ाइन के लिए @ -ms-viewport सेटिंग पर भरोसा करते हैं)।

आप इस आलेख में बताए अनुसार अतिप्रवाह व्यवहार को परिभाषित करने के लिए -ms-overflow-style का उपयोग कर सकते हैं:

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

स्क्रॉलबार को वापस लाने के लिए स्टाइल को स्क्रॉलबार पर सेट करें:

body {
    -ms-overflow-style: scrollbar;
}

स्क्रॉल पट्टी

जब तत्व ओवरफ्लो होता है, तो तत्व एक क्लासिक स्क्रॉलबार-प्रकार नियंत्रण प्रदर्शित करता है। -Ms-autohiding-स्क्रॉलबार के विपरीत, स्क्रॉल -बार पर सेट -ms-overflow-style प्रॉपर्टी वाले तत्वों पर स्क्रॉलबार हमेशा स्क्रीन पर दिखाई देते हैं और तत्व के निष्क्रिय होने पर बाहर नहीं निकलते हैं। स्क्रॉलबार सामग्री को ओवरले नहीं करते हैं, और इसलिए तत्व के किनारों के साथ अतिरिक्त लेआउट स्थान लेते हैं जहां वे दिखाई देते हैं।

Comments

मैंने इसे html एलिमेंट पर जोड़ा, अर्थात html{-ms-overflow-style: scrollbar;}यह मेरे लिए काम करता है। क्या ऐसे मामलों का उपयोग किया जाएगा, जहां इसकी आवश्यकता कहीं और थी?

— nHaskins

body{-ms-overflow-style: scrollbar;}मेरे लिए काम करना ठीक है .. धन्यवाद

— मंजीत सिंह

इसका उत्तर होना चाहिए। स्वीकार किया गया व्यूपोर्ट डिवाइस अनुकूलन को हटा देता है।

— mnsth

यह एक्स

— मोनिका

@ stefan.s यह सही उत्तर है! स्वीकार किया जाना चाहिए

— eirenaios

Answer 3

समाधान: दो चरण - पता करें कि IE10 है, तो CSS का उपयोग करें:

इनिट पर करें:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE11');
}

// --OR--

$('body').addClass(
  /msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? 'IE11' :
  ''  // Neither
);

// --OR (vanilla JS [best])--

document.body.className +=
  /msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? ' IE11' :
  '';  // Neither

इस सीएसएस जोड़ें:

body.IE10, body.IE11 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

---

यह क्यों काम करता है:

• overflow-y:scrollस्थायी रूप से चालू हो जाती है <body>टैग खड़ी स्क्रॉलबार।
• -ms-overflow-style:scrollbarऑटो छुपा व्यवहार बंद हो जाती है, इस प्रकार से अधिक सामग्री धक्का और हमें स्क्रॉलबार लेआउट व्यवहार हम सब के लिए इस्तेमाल कर रहे हैं दे रही है।

IE11 के बारे में पूछने वाले उपयोगकर्ताओं के लिए अपडेट किया गया। - संदर्भ https://docs.microsoft.com/en-us/prepret-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

Comments

आप सिर्फ बॉडी क्यों नहीं करेंगे {-ms-overflow-style: स्क्रॉलबार; }?

— स्कॉट रोमैक

-1 आपका कोड IE11 पर काम नहीं करता है और यह IE12 पर जारी होने पर अभ्यस्त नहीं होगा। आईई-विशिष्ट शैलियों को करने के लिए बेहतर तरीके हैं।

— जोसेफ लेनोक्स

@JosephLennox यदि आप IE- विशिष्ट शैलियों को करने के बेहतर तरीके को इंगित करने के लिए एक उत्तर जोड़ सकते हैं, तो मुझे यकीन है कि दोनों जीडीबल और इस सवाल के साथ आने वाले अन्य लोग इसकी सराहना करेंगे।

— कॉन्सिफिक कंपाइलर

@ConspicuousCompiler "-ms-" उपसर्ग पहले से ही पर्याप्त रूप से केवल IE बनाता है।

— जोसेफ लेनोक्स

यह @ stefan.s के उत्तर की तरह है, लेकिन अनावश्यक ब्लोट के साथ।

— Ry-

Answer 4

इसे इस्तेमाल करे

body{-ms-overflow-style: scrollbar !important;}

Answer 5

यह समस्या बूटस्ट्रैप पर डेटाटैबल्स के साथ भी हो रही है 4. Mi समाधान था:

1. जाँच की जा रही है कि क्या ब्राउज़र खुल रहा है।
2. तालिका-उत्तरदायी-अर्थात वर्ग के लिए प्रतिस्थापित तालिका-उत्तरदायी वर्ग।

सीएसएस:

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

जे एस:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
        {
            $('#tableResponsibleID').removeClass('table-responsive');
            $('#tableResponsibleID').addClass('table-responsive-ie');
        }  

Answer 6

@ -Ms-viewport और अन्य सुझावों की कोशिश की, लेकिन विंडोज 7 पर IE11 के साथ मेरे मामले में कोई भी काम नहीं किया। मेरे पास कोई स्क्रॉल बार नहीं था और यहां अन्य पोस्ट मुझे सबसे ज्यादा स्क्रॉल बार देगी जो कि वहां होने के बावजूद भी स्क्रॉल नहीं किया था बहुत सारी सामग्री। यह लेख मिला http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ जो कम हो गया। । ।

body { overflow-x: visible; }

। । । और मेरे लिए चाल चली।

Comments

सवाल लापता स्क्रॉलबार के बारे में नहीं है, लेकिन बूटस्ट्रैप का उपयोग करते समय साइड-इफेक्ट के रूप में पेश किए गए अर्ध-पारदर्शी स्क्रॉलबर्स ओवरले के बारे में है। तुम भी कोशिश कर सकते हैंbody { overflow: auto; }

— xec