Pürüzsüz kaydırma efekti iOS'ta bir iframe'de çalışmaz

Question

Aşağıdaki komut, bir web sayfasındaki bağlantı bağlantılarına tıklandığında düzgün bir scrool efekti ekler. iOS ve Android için mobil tarayıcılar gibi en modern tarayıcılarda

$('a').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 
    return false; 
}); 

Çalışır. Ancak, komut dosyası bir iframe içinde çalıştırılıyorsa, iOS'taki tarayıcılar düzgün scrool etkisini uygulamamaktadır. Aslında, çapa bağlantıları işe yaramaz hale getirilir (kullanıcı bir tanesini tıklarsa, hiçbir şey olmaz). Bir iframe içinde bile, betik Android'de ve hemen hemen tüm masaüstü tarayıcılarda çalışır.

iOS, iframe'lerle ilgili her türlü soruna sahiptir. Örneğin, bir iframe, 300px'lik bir bildirilmiş yüksekliğe sahip olsa bile, iOS, içeride kaydırma yapmadan içeriğe sığacak şekilde iframe'in yüksekliğini genişletir. Bunun için düzeltme: iframe'i 300px yükseklikteki bir div içine sarın ve overflow: auto; ve -webkit-overflow-scrolling: touch;'u ekleyin.

Sorunuma dön. Böyle bir basit betik iframe'de neden iOS'ta başarısız oluyor? Bu, iOS'un iframe'leri nasıl ele alacağıyla ilgili olabilir mi?

Öğeleri açıklığa kavuşturmak için, iOS'ta iframe içinde çalışmak için düzgün kaydırma efektine ihtiyacım var. Iframe ve parent document, her ikisi de aynı etki alanından sunulur.

Herkes, herhangi bir fikir? Çalışan bir örnek için

burada bakın: Ana html dosyasınınhttp://www.nightskyinfo.com/iframe2/

Kaynak kodu:http://www.nightskyinfo.com/iframe2/iframe.txt

: Burada iframe'de koymak html dosyasının http://www.nightskyinfo.com/iframe2/index.txt

soslu kodu

Answer 1

Komut dosyası iframe içinde çalışıyorsa, jquery seçicisi $ ifr öğelerindeki öğeleri arar Ana belgede değil, ame belgesi. Bu seçici bağlamdır. Üst belgede öğe aramak için, üst belgeyi $('html, body', parent.document) (veya top.document) yaparak belirtebilirsiniz. Bir çerçeveden ana belgeye erişmek için çerçeve etki alanı, üst karta göre olmalıdır. Bu noktayı kontrol et.

İsteğinizle ilgili anlaşılması kesin olmayan bir şey, neyi kaydırmanız gereken bir belgedir? Üstteki mi, yoksa kare olan mı?

Başka bir şey, bu başarmak için çalışıyoruz ne alamayan:

$($.attr(this, 'href')).offset().top 

IMHO, bu selektör şey eşleşir. Eğer ... href değeri olarak

CSS seçici depolamak eğer hariç ben senin ile basit bir şey (söyliyim çalışma) Aradığınız tahmin:

$(this).offset().top 

Umut ben yardımcı oldu.