Dur Iframe, ana belgenin kaydırılmasını engelliyor mu?

Question

iframe'lerle ve kaydırma ile diğer herkesin ters problemine sahip gibi görünüyorum. Ana belgenin kaydırılmasını önlemek için iframe (bir youtube videosu içerir) ihtiyacım var. Fareyi üzerine getirirsem, sayfa kaydırma tekerleği ile ilerlemez ve dokunmatik cihazların en yeni krom kanarya simülasyonuna göre, parmağımı çerçeveye koyamıyorum ve ana belgede de kaydırma yapamıyorum. Bunu durdurmanın bir yolu var mı? Benim CSS aşağıdaki gibidir:

.GalleryVideoWrapper { 
position: relative; 
padding-bottom: 56.25%; /* 16:9 */ 
padding-top: 25px; 
height: 0; 
width:95%; 
margin:auto; 
display:block; 
} 

.GalleryVideoWrapper iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 

Answer 1

bir scrolling attribute eskiden var ama html5 önerilmiyor. Bunu deneyin:

iframe { 
    overflow: hidden; 
} 

Genişliğini ve yüksekliğini bir yere koymayı unutma! iframe kaydırma özelliği denemek istiyorsa

, bu gibi olabilir:

<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe> 

burada çalışan örneğe bakın: Bu etrafında bir yol bulduk eğer http://jsfiddle.net/4dt4zhwt/1/

Answer 2

Bilmiyorum Ancak, sitemdeki tüm iframe'lerin (twitter, facebook ve youtube) sayfanın kendisini kaydırmasını engellediği aynı sorunu yaşadım. Bir sürü hata ayıklama ve kahveden sonra, onu buldum, en azından benim durumumda, overflow-x: hidden no'lu saklanmıştı. Taşma özelliğini kaldırmak benim için sorunu çözdü, Umarım sizin için çalışır!

Answer 3

Ben yatay kaydırma şöyle devre dışı etmişti: Bir iframe bir sayfada

html, body { 
    overflow-x: hidden 
} 

, ben dokunup iPad veya iPhone için Safari'de iframe hareket ettirerek dikey sayfa kaydırma çalıştı, ben edemedim 't.

Bu

benim için sabit:

* { 
    -webkit-overflow-scrolling: touch 
} 

Answer 4

soru belirsizdir, bu nedenle bu etkiyi ve nasıl çalıştığı başarmak için çeşitli yollar üzerinde aşağıda bazı detaya gitti.

iframe ile etkileşime girmeniz gerekmiyorsa, hızlı ve kirli çözüm pointer-events: none; kullanmaktır. Bu iframe'i sayfaya koyar ve kaydırmasına izin vermez. Ancak, aynı zamanda üzerine tıklamanıza izin vermez. Bu açıkça bir YouTube videosu için işe yaramayacaktır, ancak bunun bir seçenek olduğunu bilmek önemlidir.

iframe ile etkileşimde bulunmanız gerekirse, ya video oynatmak ya da bir bağlantıyı tıklatırsanız, yapmanız gereken tek şey iframe öğesinin tam içeriği görüntüleyecek kadar büyük olduğundan emin olmanızdır. Kendi HTML'imiz olmadığından OP'nin karşılaştığı sorundan emin değilim, ancak kaydırma ve iframe de kaydırma yapmaya çalışmıyorsa, ebeveynin kaymasını engellemez.

Temel olarak, imleciniz bir iframe üzerindeyse ve siz kaydırırsanız, iframe önce olayı alır. Kaydırmaya gerek duyulmuyorsa (ya iframe'nin tabanına erişememiştir ya da zaten ulaşmışsa) olay ebeveyne iletilecektir.

Son olarak, eğer bir iframeiniz varsa, kaydırılabilir olmanız gerekiyor, ancak imleç iframe üzerindeyken üst öğeyi kaydırmak istiyorsanız, şansınız yok demektir. Iframe'i bazen kullanıcının tüm sayfayı kaydırmak istediğini bildirmenin bir yolu yoktur. Bu, iframe'lerin nasıl çalıştığıdır.İmleci kaydırmak için iframe'den kaldırabilir veya iframe'nin altına gidip sayfayı aşağı doğru devam ettirebilirsiniz.

Soruya bir YouTube videosu ve CSS kullanarak, görebilmeniz için bir here demo oluşturdum. Ayrıca, kaydırılabilir iki eşit iframe ekledim ve nasıl çalıştığını göstermek için pointer-events: none; uygulandı.