एक iframe पर क्षैतिज स्क्रॉलबार छिपाएँ?

Question

मुझे सीएसएस, जेकरी या जेएस का उपयोग करके एक आइफ्रेम पर क्षैतिज स्कोलबार को छिपाने की आवश्यकता है।

Comments

संभव डुप्लिकेट: सफ़ारी / क्रोम (वेबकिट) - iframe को वर्टिकल स्क्रॉलबार और अन्य को

— मैट बॉल

iframe मूल डोमेन के समान डोमेन पर नहीं है।

— nkcmr

अतिप्रवाह-य: छिपा हुआ; Google Chrome, Safari और Opera में काम नहीं कर रहा है। इसे jsfiddle.net/m5Btd/3

— phangia2712

Answer 1

मेरा सुझाव है कि यह संयोजन के साथ कर रहा हूँ

1. सीएसएस overflow-y: hidden;
2. scrolling="no" (HTML4 के लिए)
3. और seamless="seamless"(HTML5 के लिए)*

^{* seamlessविशेषता को मानक से हटा दिया गया है , और कोई भी ब्राउज़र इसका समर्थन नहीं करता है।}

---

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}

<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>

Comments

मैंने आपका उदाहरण Chrome 15 पर लोड किया है और अभी भी स्क्रॉलबार देख रहा हूं।

— दान

scrolling="no"क्रोम में स्क्रॉलबार हटाने के लिए iframe में विशेषता जोड़ना प्रतीत होता है।

— निक

@ इसे कम से कम मेरे कंप्यूटर पर क्रोम पर नहीं हटाएं। img339.imageshack.us/img339/6685/chromelj.png

— l46kok

@ l46kok आपके स्क्रीनशॉट में शामिल नहीं हैscrolling="no"

— चेस फ्लोरल

ध्यान दें कि प्रतीत होता है कि विशेषता वर्तमान में किसी भी प्रमुख ब्राउज़र द्वारा समर्थित नहीं है । caniuse.com/#feat=iframe-seamless

— Liyali

Answer 2

scrolling="no"अपने iframe में विशेषता सेट करें।

Answer 3

यदि आपको दस्तावेज़ के कोड को अपने अंदर बदलने की अनुमति है iframeऔर वह सामग्री केवल उसकी मूल विंडो का उपयोग करते हुए दिखाई दे रही है, तो बस निम्नलिखित सीएसएस को अपने में जोड़ें iframe:

body {
    overflow:hidden;
}

यहाँ एक बहुत ही सरल उदाहरण है:

http://jsfiddle.net/u5gLoav9/

यह समाधान आपको इसकी अनुमति देता है:

• आपको HTML5 को मान्य रखें क्योंकि इसमें (HTML5 में यह विशेषता पदावनत नहीं की गई है) scrolling="no"विशेषता की आवश्यकता नहीं है iframe।

• सीएसएस अतिप्रवाह का उपयोग करते हुए अधिकांश ब्राउज़रों पर काम करता है : छिपा हुआ

• कोई JS या jQuery आवश्यक नहीं है।

टिप्पणियाँ:

स्क्रॉल-बार को क्षैतिज रूप से हटाने के लिए, इसके बजाय इस CSS का उपयोग करें:

overflow-x: hidden;

Answer 4

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

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div> 

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed