Bu derste, tarayıcı penceresinin çalışma alanının (Innerwidth ve InnerHeight), pencerenin kendisinin boyutunu (dış genişlik ve outerheight), konumunun boyutunu alabileceğiniz pencere nesnesinin özelliklerini göz önünde bulunduruyoruz. Kullanıcı ekranının sol üst köşesine (ScreenLeft ve Screenont) ve konumlar kaydırma (Pagexffset ve PagetyOffset).
Innerwidth ve InnerHeight özellikleri
Tarayıcının görünür çalışma alanı penceresinin boyutlarını elde etmek için tasarlanmıştır. Şunlar. Interwidth ve InnerHeight özellikleri, HTML belgesinin görüntülendiği alanın genişliğini ve yüksekliğini elde etmek için tasarlanmıştır. Bu özellikler sadece okunur ve piksel cinsinden iade değerleridir.
Örneğin, tarayıcının görünür çalışma alanı penceresinin yüksekliğini ve genişliğini elde edin:
Görünür Viewport (Widthcontenarea) genişliği:
Görünür görünüm alanının genişliği (HeightContenarea):
Dışarısı ve Outerheight Özellikleri
Tüm tarayıcı penceresinin boyutunu elde etmek için tasarlanmıştır, yani. Araç çubukları, kaydırma çubuğu, durum çubuğu, pencere sınırları vb. Dahil. Dışarısı ve Outerheight özellikleri yalnızca okunur ve pencerenin genişliğini ve yüksekliğini piksel cinsinden döndürür.
Örneğin, tarayıcı penceresinin yüksekliğini ve genişliğini elde edin:
Tarayıcı Windows Genişliği (widthwindow):
Tarayıcı penceresi yüksekliği (heighwindow):
Özellikler ScreenFTEFT (Screenx) ve Screenont (ScreenY)
Tarayıcı penceresinin sol üst açısının koordinatlarını veya belgenin kullanıcı ekranının sol üst köşesindeki koordinatlarını elde etmeleri amaçlanmıştır.
Bu durumda, ScreenTeft ve Screentop özellikleri Internet Explorer'da çalışır ve Mozilia Firefox'taki Screenx ve Screen'in özellikleri. Chrome, Safari tarayıcılarında ve diğer benzer tarayıcılar, hem ScreenFTEFT hem de Screenont'un özelliklerini hem de Screenx ve Screen'in özellikleri kullanılabilir.
Bu özellikleri kullanırken, bazı tarayıcıların belgenin sol üst açısının koordinatını döndürebilecekleri ve bazı tarayıcıların pencerenin sol üst köşesini koordine edebileceği gerçeğini dikkate almanız gerekir. ScreenLeft Özellikleri (Screenx) ve Screenont (ScreenY) salt okunurdur ve sol köşeye göre mesafe değerlerini yatay ve dikey olarak piksel cinsinden döndürür.
Örneğin, koordinat X'in bir mesajını ve mevcut tarayıcı penceresinin sol köşesinde (belge) ekranın sol üst köşesine göre bir mesajı geri çekin:
Koordinatları öğrenin
PageXOffset Özellikleri (Scrollx) ve PagetyOffset (Scrollx)
Belgenin, pencerenin bağıl üst köşesinin sol üst köşesinin yatay (pagneffset) veya dikey (pagetyOffset) yönünde kaydırıldığı bir dizi piksel elde etmeye yöneliktir. Özellikler Scrollx ve kaydırın, pagexoffset ve pagetyOffset'in özelliklerine göre eşdeğerlerdir. Bu özellikler sadece okunur.
Örneğin, belgenin yatay (pagexoffset) ve dikey (pagetyOffset) yönünde kaydırıldığı piksel sayısını görüntülemek için.
Kaydırma çubuğunun konumlarını öğrenin
Merhaba! Bu derste konuya devam ederken, böyle bir soruyu web sayfası olarak kaydırır ve tarayıcı boyutlarını değiştiririz. Bir tarayıcı genişliğini nasıl bulabilirim? Javascript Web sayfası boyunca nasıl kaydırılır? Bu soruların cevapları bu derste bulacağınızı düşünüyorum.
Tarayıcı penceresinin görünür kısmının genişliği / yüksekliği
Element için müşteri / yükseklik özellikleri, görünür pencere alanının sadece genişliği / yüksekliğidir.
Window.innerwidth / yükseklikte değil
IE8 hariç tüm tarayıcıların, Window.innerwidth / InnerHeight'ın özelliklerini de destekleyebileceği belirtilmelidir. Geçerli pencere boyutunu kaydederler.
Fark ne? Sen sor. Kesinlikle küçük ama son derece önemlidir.
ClientWidth / Yükseklik Özellikleri, kaydırma çubuğu varsa, içindeki genişlik / yüksekliği iade edin, tüm belgeye erişilebilen ve pencerenin bulunduğu ve penceresi.innerwidth / lise - varlığını görmezden gelir.
Sayfanın sağ tarafı kaydırma çubuğunu alırsa, bu satırlar farklı kaldırır:
Alarm (pencere.innerwidth); // tüm tüm uyarı penceresi genişliği (belge.documentElement.clientwidth); // genişlik daha az kaydırma
Genellikle biz sadece mevcut pencere genişliğiyle ilgileniyoruz, örneğin bir şey çizmek, yani kaydırma çubuğunu eksi. Bu nedenle, DocumentElement.clientwidth genellikle kullanılır.
Web sayfasının genişliği / yüksekliği kaydırma yaparken
Evet, teorik olarak, sayfanın gözle görülebilen kısmı belgeseldir.ClientWidth / yükseklik, ancak kaydırma çubuğunu dikkate alarak tam boyut, analoji, belgeselement.scrollwidth / ScrollHeight.
Bu, tüm sıradan ürünler için geçerlidir.
Ancak bu özelliklerle ilgili sayfada, kaydırma varken bir sorun olabilir, o zaman değil. Bu durumda, yanlış çalışıyorlar. CHROME / SAFARI ve OPERA tarayıcılarında, bir kaydırma çubuğunun yokluğunda, belgesellemenin değeri, bu durumda belgesellemenin değeri bile belgelerden daha az olabilir. Elbette, mantıklı olmayan bir şeye benziyor.
Bu sorun, özellikle belgeler için oluşabilir.
Ancak, sayfanın boyutunu güvenilir bir şekilde belirlemek mümkündür, sadece bu çeşitli özelliklerin maksimumunu alarak, kaydırmayı dikkate alarak:
Var scrollvisota \u003d math.max (document.body.scrollvisota, document.documentelement.scrollheight, document.body.offsetvisota, document.documentelement.offsetheight, document.body.clientvisota, document.documentelement.clientheight); Uyarı ("yükseklik, dikkate alınarak kaydırma:" + scrollvisota);
Mevcut kaydırma elde edilmesi
Geleneksel elemanın ScrollLeft / Scrolltop'ta bir akım kaydırması varsa.
Peki ya sayfa?
Gerçek şu ki, çoğu tarayıcının belgesellemeyi doğru bir şekilde işleyeceğidir. Ancak, Safari / Chrome / Opera'nın hataları var çünkü belge kullanmalısınız.
Peki, bu sorunu tamamen atlamak için, pencerenin özelliklerini kullanabilirsiniz. PAGEXOFFSET / PAGETYOFTSET:
Uyarı ("Yukarıdaki akım kaydırma:" + window.pageYOffset); Uyarı ("soldaki akım kaydırma:" + window.pagexOffset);
Bunların tüm özellikleri:
- IE8 desteklenmiyor.
- Onları sadece okuyabilirler, ancak değişmesi imkansız.
Eğer IE8 endişeli değilse, bu özellikleri kullanırız.
IE8 ile çapraz tarayıcı sürümü, belgelerde seçenek sunar:
Var scrollltop \u003d window.PageYoffset || belge.documentelement.scrolltop; Uyarı ("Geçerli Kaydırma:" + Scrolltop);
Kaydırma Sayfayı Kaydırma: Scrollto, Scrollby, Scrollintoview
Javascript kullanarak sayfada gezinmek için, tüm elemanların tamamen yüklenmesi gerekir.
Scrolltop / ScrollFft'in olağan unsurlarında, prensip olarak, değiştirebilirsiniz ve aynı zamanda öğe kaydırır.
Kimse seni aynı şekilde ve sayfa ile rahatsız etmiyor. Tüm tarayıcılarda, Chrome / Safari / Opera'ya ek olarak, Basit Kurulum Document.documentElement.Scrolltop tarafından ve belirtilende kaydırabilirsiniz. Ve her şey mükemmel çalışıyor.
Fakat başka bir evrensel çözüm var - sayfa penceresinin özel kaydırma yöntemleri.Scrallby (x, y) ve pencere.Scrollto (PAGEC, Paget).
- Scrollby (x, y) yöntemi, mevcut koordinatlarından geçer.
- Kaydırma (Pagex, Pagench) yöntemi, sayfayı tüm belgeye göre belirtilen koordinatlara kaydırır. Scrollelft / Scrolltop özelliklerini yüklemenin eşdeğeri olacaktır. Belgenin başlangıcına gitmek için, koordinatları (0,0) belirleyebilirsiniz.
scrollindoview.
Elem.ScrollLintoview metodu (üstte), eleman üzerine çağrılmalı ve sayfayı, üst parametre doğruysa, üst parametreli ise, üst kısımda ise, üst kısma yanlışsa. Ayrıca, bu üst parametre belirtilmemişse, doğru olacaktır.
Yasak Kaydırma
"Kırılmayan" bir belgeyi yapmanın gerekli olduğu durumlar vardır. Örneğin, büyük iletişim kutusu belgenin üstünde görüntülendiğinde, böylece ziyaretçi bu pencerede kaydırabilir, ancak belgenin kendisi değil.
Sayfanın kaydırılmasını yasaklamak için, belgesini teslim etmek yeterlidir. Mbowy.style.overflow \u003d "Hidden" özelliği.
Belge yerine, kaydırma yasaklanması gereken herhangi bir unsur olabilir.
Ancak bu yöntemin dezavantajı, kaydırma çubuğunun kendisinin kendisi kaybolmasıdır. Biraz genişlikte işgal edilirse, şimdi bu genişlik özgürleştirilir ve sayfanın içeriği genişletilecektir, "Jump" metni, boş yerdeki her şeyi alarak.
SONUÇLAR
- Pencerenin görünür kısmının boyutlarını elde etmek için, kullanım özelliğini kullanın: document.documentelement.clientwidth / yükseklik
- Kaydırma çubuğunun boyutunu dikkate almak için kullanılmalıdır: Var ScrollHeight \u003d Math.max (Document.Body.Scrollheight, Document.DocumentElement.Scrollheight, Document.Body.offseTheight, Document.DocumentElement.offsetheight, Document.body.clientheight , document.documentelement .clientheight);
Siteler için arayüzler geliştirirken sık sık JavaScript kullanmanız gerekir. Tabii ki kötüdür, ancak bazı durumlarda, her şeyi CSS'de tamamen uygulamak imkansızdır.
Daha fazla manipülasyon için tarayıcı penceresinin genişliğini veya yüksekliğini belirlemem için en tutarlı ihtiyaç. Bu konudaki tüm bilgileri kesme altında.
Nerede kullanışlı olabilir?
Herkes için konuşmayacağım, ancak her şeyin saf JS üzerine yazıldığı her türlü galeriler, sürgü vb. Textpattern` ile entegrasyonda bana etkilendim. JS'ye sıkıca bağlı olan şeyler nadirdir, ancak yine de buluşur, bu yüzden bu not ortaya çıktı.
2 yol tanımlayabilirsiniz: JS veya JQUERY.
Saf JS kullanarak genişlik veya yüksekliğin belirlenmesi
Bu, JavaScript motoru neredeyse her modern tarayıcısından beri en çok tercih edilen yoldur. Mobil tarayıcılar bile JS ile çalışmayı öğrendi.
Tabii ki, kullanıcının tarayıcıda JS işlemesini kapatmak için kullanılması olasılığı vardır, ancak bana öyle geliyor ki, bu kadar "garip insanlar" çok fazla değil, çünkü hemen hemen her site JS üzerinde çalışan herhangi bir çözüm kullanıyor.
JS'de belirlemek ekran boyutlarıİşlevleri kullanmanız gerekir:
Ekran.Width // Ekran Genişliği Ekranı. Height // Ekran Yüksekliği
İşte anlamsız bir örnek:
Sayfadaki bazı öğeleri yerleştirmek için kullanırsanız, ekran boyutu değil, en iyi çözüm kullanılacaktır, ancak tarayıcı penceresi boyutları. JS'de böyle yapılır:
Document.body.clientwidth // tarayıcı genişliği belgesi.body.clientheight // tarayıcı yüksekliği
Buna göre, burada anlamsız bir kullanım örneği:
JQuery kullanarak tarayıcı boyutlarının tanımı
Şahsen, aşağıda açıklanan yöntemi kullanıyorum. Bu yöntem yalnızca daha önce jquery kütüphanesini sitedeki daha önce bağladıysanız çalışır. Bunu yapmam gereken tüm sitelerde bu kütüphane standart DI / infact.
JQuery görevimizi kullanmak için kodu kullanmanız gerekir:
$ (Pencere) .Width (); // tarayıcı genişliği $ (pencere) .height (); // tarayıcı yüksekliği
Sonunda, genel olarak JS ve JQuery olmadan yapılması mümkünse, ya da kısmen yapılması gerektiğini söylemek istiyorum.
Sosyal olarak söylemek. Ağlar
Ne için gereklidir? Örneğin, tüm güzelliklerinin sadece çözüldüğü zaman, 1200'de 1600'ü çözerken sergileyen güzel bir düzenimiz var. Örneğin, çok büyük bir güzel şapkası var. Bir kişi siteye 1024 ila 768 çözünürlükte giderse ne olacak? Evet, sadece şapka görünür olacak. İyi değil? Belki. Öyleyse neden, tarayıcının yüksekliği / ekranı, şapkanın basitçe kesileceği ve menüye ve sitenin geri kalanına gittiğinde neden böyle bir şey yapmıyorsunuz? Neyin gerekli olduğunu.
Aslında, pratikte karşılaştığım örneklerden birini tanımladım (bkz. CartiGintka). Sorunu basitçe çözdü - JavaScript ile. Ve belki jquery aracılığıyla, hatırlamıyorum. Burada her iki yöntemi de tarif edeceğim.
Her şeyden önce tanımını ayırt etmek için gereklidir " ekran çözünürlüğü"Ve" tarayıcı penceresi boyutu"(Bazı makalelerde, bazı makalelerde olaylar oluyordu - tek başına yöntemler, başkalarına teklif edildi, ancak bir durumda tarayıcının çözünürlüğünü diğerinde - monitörün çözünürlüğünü ölçüyorum).
En başından beri sizin için daha önemli olduğunu belirlemek gerekir. Bir kapağı olan bir örnek durumunda, ekran çözünürlüğüne (monitör) odaklandım (monitör): Tarayıcı penceresi manuel olarak azaltılırsa, site güzeldir, sonra bu siteyi görüntülerken tarayıcının başlamasına izin verin (hiçbir şey yok) yemek yaklaşık.). Ancak, örneğin, JQuery Lightbox galerisinin genişletilmiş görüntüsünü ayarlamak için tarayıcının genişliğini ve yüksekliğini kullandım.
Ve seçtikten sonra, kodu yazın, sitenin başlığında yapabilirsiniz. İlk önce bir örnek odaklı ekran çözünürlüğü.
3-6 satır - saf Javascript, 7-11 satır - jQuery'de bir örnek. Javascript yöntemleri genişlik ve yüksekliği belirlemek için kullanılır. Genişlik ve ekran. Height yöntemleri. Hangi satırlar yapılır, net: İlk komut dosyası, isteğe bağlı CSS dosyasına giden yolu ve diğer - toplam tanımlayıcı bloğu için, CSS "arka plan konumu" özelliği bulunur.
İkinci örneğe bakıyoruz, ancak tarayıcının çözünürlüğüne odaklanacak. Hepsi aynı, yöntemler değişti.
Yani, iki örnekten, kısa bir genel bakış - ne için ne kullanmalı:
- ekran genişliği.. Ekran genişliğini (monitör) tanımlar.
- screen.height. Ekranın yüksekliğini belirler (monitör).
- document.body.clientwidth.. Tarayıcının genişliğini belirler.
- belge.body.clientheight. Tarayıcının yüksekliğini belirler.
- $ (Pencere) .Width (). Tarayıcının genişliğini belirler, ancak yalnızca jQuery'iniz varsa.
- $ (Pencere) .height (). Tarayıcı yüksekliğini belirler, ancak yalnızca JQuery'iniz varsa.
JQuery kullanıyorsanız, 3'ten ziyade 5 ve 6'dan fazla tercih edilirse, 4'ten ziyade 5'e kadar tercih edilir. Peki ve öylesine - tadı ve renk.
Spesifik yükseklik kayıtları ve jQuery için ekranların genişlikleri için - sonra, gerçekte, onları tanımıyorum. Teoride, Tip 5-6 satırlarının tasarımı olmalı, ancak bir şekilde uygulamaya rastlanmadı, bana veriyorum, onlar değil. Evet ve gerek yok, ekran. Genişlik yeterince kısa bir tasarımdır, yeterli.
Evet, hala $ (belge) .Width () - HTML belgesinin genişliğini belirler. Uygulamada kullanın - bir şekilde şüpheli. Kim Bilir - paylaşırsanız memnun olacağım.
Bugün her şey! Hafta sonuna kadar devam edin ve Kebaplara Mikriz Git! (Bazıları gibi bir şeyle hasta olmadıkça - yakl.). İyi şanslar!
