HTML iframe - स्क्रॉल अक्षम करें

84

मैं अपनी साइट में iframe का अनुसरण कर रहा हूं:

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

और इसमें स्क्रॉलिंग बार हैं।
उनसे कैसे छुटकारा पाया जाए?

html css iframe

— मिशल हरमन
स्रोत

5

हरमन - मुझे लगता है कि scrolling="no"मुझे काम करना चाहिए। मेरे लिए काम करना चाहिए। यह HTML5 में है?

— यज्ञेश अगोला

@ याग्नेश मेरे पास आपके आईफ्रेम का नमूना है और यह काम नहीं कर रहा है।

— माइकल हरमन

मैंने आपके कोड के साथ प्रयास किया है और यह बिना स्क्रॉल के ठीक काम कर रहा है। Pls जांच अगर iframe किसी भी div के तहत है।

— यज्ञेश अगोला

शायद iframe के अंदर <body> स्क्रॉलबार जोड़ रहा है, और <iframe> नहीं?

— ओरिदम

162

दुर्भाग्य से मुझे विश्वास नहीं है कि यह HTML और CSS गुणों के साथ पूरी तरह से अनुरूप HTML5 में संभव है। सौभाग्य से, अधिकांश ब्राउज़र अभी भी scrollingसंपत्ति का समर्थन करते हैं (जो एचटीएमएल 5 विनिर्देश से हटा दिया गया था )।

overflowHTML5 के लिए एकमात्र आधुनिक ब्राउज़र के रूप में समाधान नहीं है जो गलत तरीके से समर्थन करता है यह फ़ायरफ़ॉक्स है।

एक वर्तमान समाधान दोनों को मिलाना होगा:

<iframe src="" scrolling="no"></iframe>

iframe {
  overflow: hidden;
}

लेकिन ब्राउज़र अपडेट के रूप में इसे अप्रचलित किया जा सकता है। आप जावास्क्रिप्ट समाधान के लिए इसकी जांच कर सकते हैं: http://www.christersvensson.com/html-tool/iframe.htm

संपादित करें: मैंने scrolling="no"आईई 10, क्रोम 25 और ओपेरा 12.12 में काम किया है।

— जेम्स डोनली
स्रोत

1

HTML5 में <iframe> स्क्रॉलिंग विशेषता समर्थित नहीं है। इसके बजाय CSS का उपयोग करें। स्रोत: w3schools.com/tags/att_iframe_scrolling.asp

— लिनुस

4

@LinusAn यह मेरे उत्तर की पहली पंक्ति है। हालांकि समस्या यह है कि ब्राउज़र वास्तव में इसे पूरी तरह से नहीं गिरा सकते क्योंकि यह HTML4 वेबसाइटों को तोड़ देगा, इसलिए यह scrollingविशेषता अभी भी एक व्यवहार्य है, यद्यपि अमान्य विकल्प।

— जेम्स डोनली

यह सही है, लेकिन क्रोम में यह iframe के भीतर तत्वों पर स्क्रॉल इनटू व्यू को तोड़ता है। देखें code.google.com/p/chromium/issues/detail?id=137214

— पीटर ब्रांड

@Linus - दुर्भाग्य से, यह काम नहीं करना चाहिए, और इसमें काम करने वाले किसी भी ब्राउज़र गैर-अनुरूप हैं: बटन, प्रपत्र तत्वों और iframes जैसे प्रतिस्थापित तत्वों पर ओवरफ्लो लागू नहीं किया जाना चाहिए।

— जिमी ब्रैक-मैके

3

@DaniSpringer यह समाधान सामग्री को काटने के लिए समर्थन है। स्क्रॉल करने की क्षमता के बिना एक आइफ्रेम लोड करने से निर्दिष्ट आइफ्रेम आयामों में फिट होने के लिए पूरे चाइल्ड पेज को स्वचालित रूप से आकार नहीं मिलता है।

— नैट

20

मैंने इस सीएसएस के साथ उसी मुद्दे को हल किया:

    pointer-events:none;

— जॉन स्मिथ
स्रोत

8

यह स्क्रॉल करने के लिए भौतिक प्रयास को अवरुद्ध करने के लिए लगता है, बस दृश्य स्क्रॉलबार नहीं ...

— LWC

6

यह किसी भी माउस ईवेंट को फायरिंग पर रोक देगा, जिसमें स्क्रॉलिंग भी शामिल है। एक व्यापक समाधान के लिए बहुत व्यापक रास्ता

— टॉम मैकेंजी

मैं एक iframe में स्क्रॉल करने से रोकने के लिए इसका इस्तेमाल किया था जो कि foreignobjectएक SVG इमेज में जड़ा हुआ है (बस overflow: hiddenकाम नहीं किया गया)

— Tim

यह माउस स्क्रॉल व्हील (क्रोमियम में) के माध्यम से स्क्रॉल करना बंद नहीं करता है। इसके अलावा, मुझे विश्वास है कि ओपी वास्तव में स्क्रॉल सलाखों को छिपाना चाहता है; जैसा कि मेरा मानना है कि यह आंशिक रूप से उस प्रश्न को हल करता है, आपको अपना जवाब stackoverflow.com/questions/2712034 पर ले जाना चाहिए ।

— EoghanM

धन्यवाद, कम से कम iframe स्क्रॉल अक्षम है।

— सोरेन

11

यह काम करने लगता है

html, body { overflow: hidden; }

इफ्रेम के अंदर

संपादित करें: बेशक यह केवल काम कर रहा है, अगर आपके पास इफ्रेम की सामग्री है (जो मेरे मामले में मेरे पास है)

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

1

हालांकि एक आइफ्रेम का उपयोग करते समय, आप आमतौर पर इसमें क्या नहीं कर सकते हैं, क्योंकि यह अक्सर दूसरे डोमेन पर सामग्री को शामिल करने के लिए होता है।

— टिम मालोन

2

सभी सामग्री सेट करें:

#yourContent{
 width:100%;
height:100%;  // in you csss
}

बात यह है कि iframe स्क्रॉल को iframe द्वारा कंटेंट NOT द्वारा ही सेट किया जाता है।

सीएसएस के साथ इंटीरियर में सामग्री को 100% पर सेट करें और HTML में iframe के लिए वांछित करें

— वर्डे मैक
स्रोत

1

मैंने अपने वर्तमान ब्राउज़र (Google Chrome संस्करण 60.0.3112.113 (आधिकारिक बिल्ड) (64-बिट) में स्क्रॉलिंग = "नहीं" की कोशिश की और वह काम नहीं किया। हालाँकि, स्क्रॉल = "नहीं" ने काम किया। कोशिश करने लायक हो सकता है

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>

— ज़च इम्होलते
स्रोत

1

वास्तव में, इससे थोड़ा आगे खुदाई करते हुए, मुझे लगता है कि इसका कारण सिर्फ मुझे ऊंचाई बदलना था = "" वास्तविक iFrame की तुलना में अधिक लंबा होना जो मैं लोड करने की कोशिश कर रहा हूं। इसलिए स्क्रॉल को निरर्थक बनाने के लिए ऊँचाई को लंबा करना वास्तव में स्क्रॉल बार को मेरे लिए दूर कर दिया। मैं हालांकि पूरे पृष्ठ को प्रदर्शित करने की कोशिश कर रहा हूं, जो आप प्राप्त करने की कोशिश से अलग हो सकते हैं।

— ज़च इम्होलते

यह प्रश्न के वास्तविक उत्तर की तुलना में अधिक टिप्पणी जैसा लगता है।

1

धन्यवाद JDV! मैं StackOverflow के लिए नया हूँ इसलिए मैंने टिप्पणी करने की कोशिश की लेकिन उसके पास पर्याप्त प्रतिष्ठा अंक या जो भी कहा जाता है वह नहीं था। इसलिए मैं सहमत हूं, यह एक टिप्पणी होनी चाहिए थी। आपके मार्गदर्शन की सराहना करते हैं!

— ज़च इम्होल्ते

ऐसे तरीके हैं जो आप तब तक योगदान कर सकते हैं जब तक आपको आवश्यक प्रतिनिधि न मिल जाए। stackoverflow.com/help/whats-reputation

0

इस शैली को जोड़ें .. अपने आइफ्रेम टैग के लिए ..

overflow-x:hidden;
overflow-y:hidden;

— शशि
स्रोत

8

OverflowHTML5 iFrames पर काम नहीं करता है। एकमात्र ब्राउज़र जो गलत तरीके से समर्थन करता है वह फ़ायरफ़ॉक्स है।

— जेम्स डोनली

1

@JamesDonnelly वास्तव में उन्होंने यह निर्दिष्ट नहीं किया कि यह html5 है, यही कारण है कि हमने ओवरफ्लो का उपयोग किया

— sasi

0

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

iframe body { overflow:hidden; }

जो आश्चर्यजनक रूप से किया Firefox के साथ काम करते हैं, उन कष्टप्रद स्क्रॉलबार को हटाने।

सफारी में, हालांकि, इसकी सामग्री और इसकी सीमा के बीच, इफ्रेम के दाईं ओर एक 2-पिक्सेल-चौड़ी पारदर्शी रेखा दिखाई दी है। अजीब।

— सीब ज़रेम्बा
स्रोत

0

बस नीचे दिए गए विकल्प की तरह एक iframe स्टाइल जोड़ें। मुझे उम्मीद है कि इससे समस्या हल हो जाएगी।

पहला विकल्प:

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

दूसरा विकल्प:

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

— अरशदुल हुसैन
स्रोत

0

यह मेरे लिए काम करता है:

<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>

नोट: यदि आपको किसी अन्य तत्व में स्क्रॉलबार की आवश्यकता है, तो {overflow:scroll!important;}उस तत्व में सीएसएस भी जोड़ें

— तंबाकू से होने वाली बीमारी
स्रोत

-1

इस फ्रेम के लिए:

    <iframe src="" name="" id=""></iframe>

मैंने अपने css कोड पर यह कोशिश की:

    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }

— लुकास सैंटोस
स्रोत

-1

HTML5 संस्करणों के नीचे

iframe {
    overflow:hidden;
}

Html5 में

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

लेकिन अभी तक सही ढंग से समर्थित नहीं है

— Prashobh
स्रोत

2

इस और इस के अनुसार , seamlessविशेषता को युक्ति से हटा दिया गया है।

— टिम मालोन

-5

आप निम्नलिखित सीएसएस कोड का उपयोग कर सकते हैं:

margin-top: -145px; 
margin-left: -80px;
margin-bottom: -650px;

ताकि इफ्रेम के दृश्य को सीमित किया जा सके।

— जीन नूवलेट
स्रोत

3

है margin-downकोई नई प्रॉपर्टी या आप मतलब था margin-bottom?

— Bjørn-Roger Kringsjå