SORU
23 EYLÜL 2008, Salı

Nasıl bir DOM öğesi, Geçerli Görünüm penceresi görünür?

Varsa bir DOM elemanı (HTML belgesi) görünür olup olmadığını söylemek için etkili bir yoldur (görünürgörünüm penceresi)?

(Soru Firefox saygılar)

CEVAP
26 EYLÜL 2011, PAZARTESİ

Şimdi most browsers en iyi uygulama haline gelen getBoundingClientRect yöntem, destek. Yaşlı bir cevap kullanan very slow, not accurate has several bugs.

* 7 *19 18* *IE8, ancak eski cevap daha iyi çalışır.

Çözüm doğru olarak seçilen almost never precise. 21 ** böcekler hakkında.

Recommended by John Resig çözüm:

(test: IE 7 , iOS5 Safari, Android2 , Blackberry, Opera Mobile, YANİ Cep)

function isElementInViewport (el) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

Nasıl kullanmak için:

Çağrıldığında zaman anında işlevi yukarıda verilen doğru cevap verir emin olabilirsiniz, ama bir olay olarak, bir elemanın görünürlük izleme hakkında?

<body> etiket: altına aşağıdaki kodu yerleştirin

function onVisibilityChange (el, callback) {
    return function () {
        /*your code here*/ console.log('visibility '   isElementInViewport(el));
    }
}

var handler = onVisibilityChange(el, callback);


//jQuery
$(window).on('DOMContentLoaded load resize scroll', handler); 

/* //non-jQuery
if (window.addEventListener) {
    addEventListener('DOMContentLoaded', handler, false); 
    addEventListener('load', handler, false); 
    addEventListener('scroll', handler, false); 
    addEventListener('resize', handler, false); 
} else if (window.attachEvent)  {
    attachEvent('onDOMContentLoaded', handler); // IE9  :(
    attachEvent('onload', handler);
    attachEvent('onscroll', handler);
    attachEvent('onresize', handler);
}
*/

Eğer herhangi bir DOM değişiklikler yaparsanız, tabii ki Senin elemanın görünürlüğünü değiştirirler.

Kurallar ve ortak tuzaklar:

Belki sayfa / mobil cihaz tutam zoom izlemeniz gerekiyor?bir WordPress kullanmak zoom/pinch çapraz tarayıcı işlemek gerekir, aksi halde first second link size yardımcı olacaktır.

EğerDOM değiştirinelemanın görünürlüğünü etkileyebilir. Bunun üzerinde kontrol altına almak ve handler() elle aramalısın. Ne yazık ki, hiçbir çapraz tarayıcı var onrepaint olay. Öte yandan bize iyileştirmeleri yapmak ve elemanın görünürlüğünü değiştirebilirsiniz DOM değişiklikler sadece üzerine yeniden kontrol gerçekleştirmek için izin verir.

Asla Ve Aslaşu anda bir WordPress kullanmak there is no warranty CSS has been applied çünkü $(document).ready() sadece, içinde kullanın. Kodunuzu yerel sabit disk üzerinde CSS ile çalışabilir, ancak uzak sunucu üzerinde koymak bir kez başarısız olur.

DOMContentLoaded ateş sonra, styles are applied ama the images are not loaded yet. Yani, window.onload olay dinleyici ekleyelim.

/Pinch zoom olayı henüz yakalayamadık.

Son çare aşağıdaki kodu olabilir:

/* TODO: this looks like a very bad code */
setInterval(handler, 600);

Eğer web sayfası sekmesini aktif ve görünür ise harika bir özellik, eğer değer veriyorsan pageVisibiliy HTML5 API kullanabilirsiniz.

TODO: bu yöntem iki durum işlemez:

  • üst üste z-index kullanarak
  • öğe overflow-scroll kullanarak konteyner

Bu durumda ve bir şey daha kod gerekir...

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
HtmlFirefoxDom

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Jonnyriddlin1

    Jonnyriddlin

    4 Ocak 2007
  • The Dubstep FX

    The Dubstep

    5 Mart 2011
  • Tire Rack

    Tire Rack

    31 Mayıs 2007

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR