स्क्रॉलबार को iframe से निकालें

Question

इस कोड का उपयोग करना

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

यह इस प्रकार दिखाई देता है ( http://www.talkjesus.com के होमपेज पर shoutbox )

मैं क्षैतिज स्क्रॉलबार कैसे निकालूं और ऊर्ध्वाधर स्क्रॉलबार के सीएसएस को संशोधित करूं?

Comments

stackoverflow.com/questions/4856746/… के साथ डुप्लिकेट जिसका बेहतर जवाब है

— Daniël Tulp

Answer 1

अपनी सीएसएस में:

iframe{
    overflow:hidden;
}

Comments

धन्यवाद, लेकिन क्षैतिज स्क्रॉल केवल और अभी भी फ़ायरफ़ॉक्स में दिखाई देता है। Chrome में दिखाई नहीं देता और न ही IE। इसके अलावा, स्क्रॉलबार के लिए सीएसएस केवल आईई में प्रभावी रूप से लागू होता है, न कि एफएफ और न ही क्रोम (बाद वाले शो डिफ़ॉल्ट रूप से बेज रंग / शेड्स)।

— विश्वास योग्य बातें

यह काम नहीं करेगा क्योंकि ओवरफ्लो, iframe दस्तावेज़ में होता है, जिसे आप आमतौर पर क्रॉस-डोमेन iframe सुरक्षा प्रतिबंधों के कारण संशोधित नहीं कर पाएंगे।

— थुडन

यह काम नहीं करता है क्योंकि यह iframe की सामग्री को प्रभावित नहीं करेगा, बस iframe ही। समाधान स्क्रॉल कर रहा है = "नहीं"।

— TheLD

यह एक गलत उत्तर है, Google क्रोम में स्क्रॉलबार को नहीं हटाता है, लेकिन स्क्रॉलिंग = "नहीं" करता है।

— एंडर्स लिंडन

@LarsVandeDonk आपका उत्तर सही समाधान होना चाहिए।

— वोंग जिया हौ

Answer 2

scrolling="no"Iframe में विशेषता जोड़ें ।

Comments

सीएसएस के साथ ऐसा करने में सक्षम?

— Evorlor

हां, लेकिन तब Chrome में स्क्रॉल इनटू व्यू का उपयोग नहीं किया जा सकता है। Code.google.com/p/chromium/issues/detail?id=137214

— पीटर ब्रांड

ठीक है, यह सामग्री के स्क्रॉलबार को छुपाता है, और सामग्री को स्क्रॉल करने से रोकता है। यह iframe के स्क्रॉलबार को प्रदर्शित होने से नहीं रोकता है।

— डेव कजिनो

आइफ्रेम पर स्क्रॉलिंग विशेषता अब आधिकारिक रूप से अप्रचलित है। इसके बजाय CSS का उपयोग किया जाना चाहिए।

— माइक पोले

@MikePoole यह आधिकारिक तौर पर अप्रचलित हो सकता है, लेकिन इसने overflow:hidden;क्रोम 65.0.3325.181 पर सेटिंग करने में मदद नहीं की , लेकिन scrolling="no"मदद की।

— कुछ

Answer 3

यह सभी ब्राउज़रों में काम करता है। jsfiddle यहाँ http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

Answer 4

जोड़ने scroll="no"और style="overflow:hidden"iframe पर काम नहीं किया, मैं style="overflow:hidden"html दस्तावेज़ iframe के अंदर लोड के शरीर पर जोड़ना पड़ा ।

Comments

यदि यह मदद करता है, तो फ़ायरफ़ॉक्स में एक मुद्दा है, जहां अगर आपके पास एक तत्व सीएसएस transform: scale(0.7)या ऐसा है, तो यह स्क्रॉलबार (जो आपके iFrame में दिखाई देगा) का निर्माण करेगा, जब तक कि आप इसे overflow: hidden;पूर्वज के साथ क्लिप नहीं करते हैं (इसके बजाय एक div हो सकता है) तन)।

— वृथाकेनी

ऐसा इसलिए है क्योंकि यह 'स्क्रॉल = नहीं' है, 'स्क्रॉल = नहीं'।

— ब्रायन ग्रीन

क्या आप हमारे लोड किए गए चारों ओर लोडेड हैं? आसपास क्या है?

— जोआओ पिमेंटेल फेरेरा

<iframe src = "/ test.html"> के अंदर लोड किया गया, जहां test.html में यह सेटिंग है।

— निर्वाण Jan४

Answer 5

scrolling="no"नीचे की तरह विशेषता जोड़ने का प्रयास करें:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>

Answer 6

बस जोड़ें scrolling="no"और seamless="seamless"iframe टैग के लिए विशेषताएँ। इस तरह:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"

Comments

सीमलेस विशेषता को HTML से हटा दिया गया है ।

— नपुंसकता

सीएसएस का उपयोग आपको सीमलेस विशेषता के बजाय करना होगा।

— नीमा रहबर

@NimaRahbar निर्बाध विशेषता अप्रचलित हो सकती है, लेकिन सीएसएस iframe मापदंडों का समर्थन नहीं करता है।

— कार्ट

Answer 7

यहां किसी पर स्क्रॉलबार अक्षम करने के साथ एक समस्या हो रही है iframe, हो सकता है कि iframe की सामग्री तत्वों पर स्क्रॉलबार है नीचेhtml तत्व!

कुछ लेआउट सेट htmlऔर body100% ऊंचाई पर हैं, और (या ) के #wrapperसाथ एक div का उपयोग करते हैं , जिससे स्क्रॉलिंग को तत्व में स्थानांतरित किया जाता है ।overflow: auto;scroll#wrapper

ऐसे मामले में, आप जो कुछ भी नहीं करते हैं वह स्क्रॉलबार को दूसरे पृष्ठ की सामग्री को संपादित करने के अलावा दिखाने से रोक देगा।

Answer 8

<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

उपरोक्त div का उपयोग करें और यह किसी भी ब्राउज़र में स्क्रॉल बार नहीं दिखाएगा।

Comments

seamlessविशेषता HTML5 मान्य नहीं है, अधिकांश ब्राउज़रों ( caniuse.com/#search=seamless ) द्वारा समर्थित नहीं है , और अन्य स्टाइलिंग में से अधिकांश अनावश्यक है।

— पेरे

Answer 9

दोनों स्क्रॉल बार को छिपाने के लिए इसे अपने सीएसएस में जोड़ें

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}

Answer 10

यह एक अंतिम उपाय है, लेकिन ध्यान देने योग्य है - आप उन प्रसिद्ध 90 के स्क्रॉल बार से छुटकारा पाने के लिए ::-webkit-scrollbarछद्म तत्व का उपयोग कर सकते हैं iframe।

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

संपादित करें: हालांकि यह अपेक्षाकृत समर्थित है , ::-webkit-scrollbarसभी ब्राउज़रों के अनुरूप नहीं हो सकता है। सावधानी से प्रयोग करें :)

Comments

यह एकमात्र उत्तर है जिसने मेरी मदद की। आप अभी भी स्क्रॉल कर सकते हैं लेकिन आपको बदसूरत स्क्रॉलबार दिखाई नहीं देता है। धन्यवाद!

— करमदिझानोव

Answer 11

बस क्षैतिज स्क्रॉल पट्टी को छिपाने के लिए इसे अपने सीएसएस में जोड़ें

iframe{
    overflow-x:hidden;
}

Answer 12

iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

इस तरह आप इफ्रे की चौड़ाई को जितना बड़ा होना चाहिए, उससे बड़ा कर देते हैं। फिर आप क्षैतिज स्क्रॉलबार को अतिप्रवाह-एक्स के साथ छिपाते हैं: छिपा हुआ।