Kaydırma çubuğunu iframe'den kaldırın

117

Bu kodu kullanarak

<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>

Görünüşü budur ( http://www.talkjesus.com ana sayfasındaki mesaj kutusu )

Yatay kaydırma çubuğunu nasıl kaldırırım ve dikey kaydırma çubuğunun CSS'sini nasıl değiştiririm?

html css iframe

— Görünmeyen Şeylere İnanç
kaynak

2

daha iyi bir cevabı olan stackoverflow.com/questions/4856746/… ile

— yineleyin

9

css'nizde:

iframe{
    overflow:hidden;
}

— takien
kaynak

7

Teşekkürler, ancak yalnızca yatay kaydırma ve hala Firefox'ta görünüyor. Chrome'da veya IE'de görünmüyor. Ayrıca, kaydırma çubuğu için CSS yalnızca IE'de etkili bir şekilde uygulanır, FF'de veya Chrome'da uygulanmaz (ikincisi, varsayılan bej renk / tonları gösterir).

— Görünmeyen Şeylere İnanç

3

Etki alanları arası iframe güvenlik kısıtlamaları nedeniyle genellikle değiştiremeyeceğiniz iframe belgesinde taşma meydana geldiğinden bu işe yaramaz.

— thdoan

54

Bu, iframe'in içeriğini, yalnızca iframe'in kendisini etkilemeyeceği için işe yaramaz. Çözüm kaydırma = "hayır".

— TheLD

4

Bu yanlış bir cevaptır, google chrome'daki kaydırma çubuklarını kaldırmaz, ancak kaydırma = "hayır" kaldırır.

— Anders Lindén

@LarsVandeDonk Cevabınız doğru çözüm olmalıdır.

— Wong Jia Hau

314

İframe'e scrolling="no"öznitelik ekleyin .

— GELİŞMEK
kaynak

1

bunu css ile yapabiliyor musunuz?

— Evorlor

1

Evet, ancak bu durumda Chrome'da scrollIntoView kullanılamaz. Bkz code.google.com/p/chromium/issues/detail?id=137214

— Peter Brand

1

bu, içeriğin kaydırma çubuğunu gizler ve içeriğin kaydırılmasını engeller. iframe'in kaydırma çubuğunun görünmesini engellemez.

— Dave Cousineau

3

İframe üzerindeki kaydırma özelliği artık resmi olarak kullanılmıyor. Bunun yerine CSS kullanılmalıdır.

— Mike Poole

4

@MikePoole Resmi olarak eski olabilir, ancak overflow:hidden;Chrome 65.0.3325.181'i ayarlamaya yardımcı olmadı, ancak scrolling="no"yardımcı oldu.

— bazı

28

Bu, tüm tarayıcılarda çalışır. jsfiddle burada http://jsfiddle.net/zvhysct7/1/

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

— Thyagarajan C
kaynak

21

Ekleme scroll="no"ve style="overflow:hidden"iframe üzerinde işe yaramadı, style="overflow:hidden"iframe içine yüklenen html belgesinin gövdesini eklemek zorunda kaldım .

— nirvana74v
kaynak

1

Bu yardımcı oluyorsa, Firefox'ta bir sorun vardır; burada bir CSS transform: scale(0.7)öğeniz veya benzeri bir öğeniz varsa, bir atayla kırpmadığınız sürece kaydırma çubukları (iFrame'inizde görünecektir) oluşturacaktır (bunun overflow: hidden;yerine bir div olabilir) vücut).

— WraithKenny

8

Bunun nedeni, "kaydırma = hayır" değil, "kaydırma = hayır" olmasıdır.

— Bryan Yeşil

Yüklü çevremizde mi yüklü demek istiyorsun? Neyin etrafında?

— João Pimentel Ferreira

— nirvana74v

16

Aşağıdaki scrolling="no"gibi bir özellik eklemeyi deneyin :

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

Snippet'i genişlet

— Allabux B
kaynak

11

Sadece iframe etiketine scrolling="no"ve seamless="seamless"öznitelikleri ekleyin . bunun gibi:-

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

— Nima Rahbar
kaynak

13

Kusursuz öznitelik HTML'den kaldırıldı .

— neopickaze

Kesintisiz öznitelik yerine css kullanmalısınız.

— Nima Rahbar

@NimaRahbar sorunsuz özniteliği eski olabilir, ancak css iframe parametrelerini desteklemez.

— Terkedilmiş Sepet

9

Burada herkes üzerinde kaydırma çubukları devre dışı bırakılması ile ilgili bir sorun yaşıyorsa iframeiframe'in içerik öğeleri üzerinde kaydırma çubukları bulunur, bunun nedeni olabilir aşağıdahtml eleman!

Bazı düzenler % 100 yüksekliğe ayarlanır htmlve (veya ) ile bodybir #wrapperdiv kullanır , böylece kaydırmayı öğeye taşır.overflow: auto;scroll#wrapper

Böyle bir durumda, diğer sayfanın içeriğini düzenleme dışında yaptığınız hiçbir şey kaydırma çubuklarının görünmesini engellemez.

— WraithKenny
kaynak

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>;

Yukarıdaki div'i kullanın ve herhangi bir tarayıcıda kaydırma çubuğunu göstermeyecektir.

— KnightFury
kaynak

3

seamlessöznitelik geçerli HTML5 değil, çoğu tarayıcı tarafından desteklenmiyor ( caniuse.com/#search=seamless ) ve diğer stillerin çoğu gereksizdir.

— Pere

8

Her iki kaydırma çubuğunu da gizlemek için bunu css'nize ekleyin

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

— Deepika Patel
kaynak

6

Bu son çare, ancak bahsetmeye değer - 90'ların ünlü kaydırma çubuklarından kurtulmak için ebeveynindeki ::-webkit-scrollbarsözde öğeyi kullanabilirsiniz iframe.

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

Düzenleme: nispeten desteklenmesine rağmen , ::-webkit-scrollbartüm tarayıcılara uygun olmayabilir. Dikkatle kullanın :)

— DotBot
kaynak

2

Bana yardımcı olan tek cevap bu. Hala kaydırabilirsiniz ancak çirkin kaydırma çubuğunu görmüyorsunuz. Teşekkür ederim!

— Karmidzhanov

4

Yalnızca yatay kaydırma çubuğunu gizlemek için bunu css'nize ekleyin

iframe{
    overflow-x:hidden;
}

— Abhidev
kaynak

3

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

Bunun gibi, Iframe'in genişliğini olması gerekenden daha büyük yaparsınız. Sonra yatay kaydırma çubuğunu overflow-x: hidden ile gizlersiniz.

— Nico Grill
kaynak