Bir js sayfasının yüksekliği nasıl belirlenir? JavaScript ve jQuery'de "ekran çözünürlüğü" ve "tarayıcı penceresi boyutu" nasıl belirlenir? Sayfa kaydırmayı değiştirme: ScrollTo, ScrollBy, ScrollIntoView

Web siteleri için arayüzler geliştirirken sıklıkla JavaScript kullanmanız gerekir. Elbette bu kötü, ancak bazı durumlarda her şeyi tamamen CSS'ye uygulamak imkansızdır.

En sık karşılaştığım ihtiyaç, daha fazla değişiklik yapmak için tarayıcı penceresinin genişliğini veya yüksekliğini belirlemektir. Kesimin altında bu konuyla ilgili tüm bilgiler bulunmaktadır.

Bu nerede yararlı olabilir?

Herkes adına konuşmayacağım, ancak bu benim için her şeyin saf JS ile yazıldığı her türlü galeriyi, kaydırıcıyı vb. Textpattern ile entegre etmede kullanışlı oluyor. JS'ye sıkı bir şekilde bağlı olan şeyler nadirdir, ancak meydana gelirler, bu notun ortaya çıkmasının nedeni de budur.

Bunu 2 şekilde tanımlayabilirsiniz: JS veya jQuery.

Saf JS kullanarak genişliği veya yüksekliği belirleme

Hemen hemen her modern tarayıcının bir JavaScript motoru olduğundan bu en çok tercih edilen yöntemdir. Mobil tarayıcılar bile JS ile çalışmayı öğrendi.

Elbette, kullanıcının tarayıcıda JS işlemeyi kendisinin devre dışı bırakma olasılığı var, ancak bana öyle geliyor ki bu kadar çok "tuhaf insan" yok, çünkü hemen hemen her site JS üzerinde çalışan bir tür çözüm kullanıyor.

JS'de ekran boyutlarını belirlemek için işlevleri kullanmanız gerekir:

Screen.width //Ekran genişliği screen.height //Ekran yüksekliği

İşte anlamsız bir kullanım örneği:

uyarı(ekran.genişlik+"x"+ekran.yükseklik);

Bunu sayfada bazı öğeleri konumlandırmak için kullanıyorsanız en iyi çözüm, ekran boyutları yerine tarayıcı penceresi boyutlarını kullanmak olacaktır. JS'de bu şu şekilde yapılır:

Document.body.clientWidth //Tarayıcı genişliği document.body.clientHeight //Tarayıcı yüksekliği

Buna göre burada anlamsız bir kullanım örneği verilmiştir:

alarm(document.body.clientWidth+"x"+document.body.clientHeight);

jQuery ile tarayıcı boyutlandırma

Şahsen ben aşağıda açıklanan yöntemi kullanıyorum. Bu yöntem yalnızca jQuery kitaplığını sitenize daha önce yüklediyseniz işe yarar. Oluşturmak zorunda olduğum tüm sitelerde bu kütüphane fiili bir standarttır.

Görevimizde jQuery'yi kullanmak için kodu kullanmamız gerekiyor:

$(pencere).width(); //Tarayıcı genişliği $(window).height(); //Tarayıcı yüksekliği

Ve son olarak şunu söylemek isterim ki, genel olarak veya kısmen JS ve jQuery olmadan yapmak mümkünse, o zaman yapmanız gereken tam olarak budur.

Sosyal medyada paylaşın ağlar

Bu ne için? Örneğin, tüm güzelliğini yalnızca 1600 x 1200 çözünürlükte gösteren güzel bir web sitesi düzenine sahibiz. Örneğin, çok büyük, güzel bir başlığı var. Bir kişi siteyi 1024 x 768 çözünürlükte ziyaret ederse ne olur? Evet, yalnızca şapka görünecek. İyi değil? Belki. O halde neden tarayıcının/ekranın yüksekliği göz önüne alındığında, başlığın kesilmesi ve menünün ve sitenin geri kalanının gitmesi için böyle bir şey yapmıyorsunuz? Vay, tam da ihtiyacın olan şey.

Aslında pratikte karşılaştığım örneklerden birini anlattım (bkz. resim). Sorunu basitçe javascript aracılığıyla çözdüm. Ya da belki jQuery aracılığıyla hatırlamıyorum. Burada her iki yöntemi de anlatacağım.

Her şeyden önce, "ekran çözünürlüğü" ve "tarayıcı penceresi boyutu" tanımlarını birbirinden ayırmak gerekir (çünkü bazı makalelerde olaylar vardı - bazı yöntemleri eleştirdiler, diğerlerini önerdiler, ancak bir durumda tarayıcı çözünürlüğünü ölçtüler, diğerinde - monitör çözünürlüğü).

Sizin için neyin daha önemli olduğunu en başından belirlemeniz gerekir. Başlıkla ilgili örnekte, ekran (monitör) çözünürlüğü beni yönlendirdi: sonuçta site güzel, tarayıcı penceresi manuel olarak küçültülmüşse, bunu görüntülerken tarayıcılarını tam ekrana genişletmelerine izin verin site (onların işi yok, biliyorsun - Editörün Notu). 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ıyoruz, belki sitenin başlığına. İlk olarak ekran çözünürlüğüne odaklanan bir örnek.

3-6. satırlar tamamen javascripttir, 7-11. satırlar jQuery'deki bir örnektir. Genişlik ve yüksekliği belirlemek için javascript yöntemleri screen.width ve screen.height kullanılır. Satırların ne yaptığı açıktır: İlk komut dosyası, yola giden yolu belirtir. ek dosya CSS, diğeri ise tanımlayıcı toplamının bulunduğu blok için “background-position” css özelliğini ayarlar.

İkinci örneğe bakalım, ancak bu, tarayıcı çözünürlüğüne odaklanacaktır. Her şey aynı, yöntemler değişti.

Yani, iki örnekten neyin ne için kullanılacağına dair kısa bir genel bakış:

ekran genişliği. Ekranın (monitör) genişliğini tanımlar.

ekran yüksekliği Ekranın (monitör) yüksekliğini belirler.

document.body.clientWidth . Tarayıcının genişliğini tanımlar.

document.body.clientHeight . Tarayıcının yüksekliğini tanımlar.

$(pencere).width() . Tarayıcının genişliğini tanımlar, ancak yalnızca jQuery mevcutsa.

$(pencere).height() . Tarayıcının yüksekliğini tanımlar, ancak yalnızca jQuery mevcutsa.

JQuery kullanıyorsanız, seçenek 5'in 3'e ve 6'dan 4'e tercih edileceği açıktır - bunlar sadece daha kısadır. Tadına ve rengine bağlı.

JQuery için ekran yüksekliği ve genişliğine ilişkin belirli girişlere gelince, dürüst olmak gerekirse bunları bilmiyorum. Teorik olarak 5-6 çizgili bir yapı olması lazım ama pratikte pek rastlamadım, yokmuş gibi geliyor bana. Ve bu gerekli değil, screen.width yeterince kısa bir yapıdır, yeterlidir.

Evet, ayrıca $(document).width() vardır - HTML belgesinin genişliğini belirler. Pratikte kullanımı bir şekilde şüphelidir. Kim bilir paylaşırsanız sevinirim.

Hepsi bugün için! Hafta sonuna kadar sabredelim ve topluca mangallara gidelim! (bir şeyden bıkmadığınız sürece, örneğin editörün notu). İyi şanlar!

Merhaba! Bu derste konuya devam ederek bir web sayfasını kaydırma ve tarayıcı boyutlarını değiştirme konusuna bakacağız. Tarayıcı genişliğini nasıl bulabilirsiniz? JavaScript kullanarak bir web sayfası nasıl kaydırılır? Bu soruların cevabını 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 Bir öğenin clientWidth/Height özellikleri, pencerenin görünür alanının tam olarak genişliği/yüksekliğidir.


window.innerWidth/Height değil

IE8 dışındaki tüm tarayıcıların da window.innerWidth/innerHeight özelliklerini destekleyebildiğini unutmamak gerekir. Tasarruf ediyorlar şu anki boyutu pencere.

Fark ne? Sen sor. Elbette küçük ama son derece önemli.

Kaydırma çubuğu varsa clientWidth/Height özellikleri, belgenin tamamı için mevcut olan genişliği/yüksekliği tam olarak döndürür ve window.innerWidth/Height onun varlığını yok sayar.

Sayfanın sağ tarafında bir kaydırma çubuğu bulunuyorsa bu satırlarda farklı şeyler görüntülenir:

Alert(window.innerWidth); // pencerenin tam genişliği warning(document.documentElement.clientWidth); // genişlik eksi kaydırma

Genellikle yalnızca pencerenin mevcut genişliğiyle ilgileniriz, örneğin bir şey çizmek için, yani kaydırma çubuğu hariç. Bu nedenle documentElement.clientWidth sıklıkla kullanılır.

Kaydırma dikkate alınarak bir web sayfasının genişliği/yüksekliği

Evet, teorik olarak sayfanın görünür kısmı documentElement.clientWidth/Height'tır, ancak kaydırma çubuğu da dahil olmak üzere tam boyut, benzer şekilde, documentElement.scrollWidth/scrollHeight'tır.

Bu, tüm düzenli elemanlar için geçerlidir.

Ancak bu özelliklere sahip bir sayfada kaydırmanın var olup olmaması sorun yaratabilir. Bu durumda düzgün çalışmıyorlar. Şunu söylemek gerekir ki Chrome tarayıcıları/ Safari ve Opera, kaydırma çubuğunun yokluğunda, bu durumda documentElement.scrollHeight'ın değeri documentElement.clientHeight'tan bile daha az olabilir, bu da elbette mantıksız bir şeye benziyor

Bu sorun özellikle documentElement için ortaya çıkabilir.

Ancak aşağıdaki birkaç özelliğin maksimumunu alarak kaydırmayı dikkate alarak sayfa boyutunu güvenilir bir şekilde belirleyebilirsiniz:

Var ScrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); warning("Kaydırma dahil yükseklik: " + kaydırmaVisota);

Geçerli kaydırmayı alma

Normal bir öğenin geçerli bir kaydırması varsa, bunu kaydırmaLeft/scrollTop'ta alabilirsiniz.

Peki sayfa ne olacak?

Mesele şu ki çoğu tarayıcı, documentElement.scrollLeft/Top isteğini doğru şekilde yerine getirir, ancak Safari/Chrome/Opera'da document.body kullanmanızı gerektiren hatalar vardır.

Bu sorunu tamamen aşmak için window.pageXOffset/pageYOffset özelliklerini kullanabilirsiniz:

Alert("Geçerli kaydırma üst: " + window.pageYOffset); warning("Geçerli sola kaydırma: " + window.pageXOffset);

Bunların hepsi özelliklerdir:

• Desteklenmiyor IE8-
• Yalnızca okunabilir ve değiştirilemezler.

Eğer IE8 önemli değilse, o zaman sadece bu özellikleri kullanırız.

IE8'i dikkate alan çapraz tarayıcı seçeneği, documentElement üzerinde bir seçenek sunar:

Var ScrollTop = window.pageYOffset || document.documentElement.scrollTop; warning("Geçerli kaydırma: " + kaydırmaTop);

Sayfa kaydırmayı değiştirme: ScrollTo, ScrollBy, ScrollIntoView

Bir sayfayı JavaScript kullanarak kaydırmak için sayfanın tüm öğelerinin tam olarak yüklenmesi gerekir.

Normal elemanlarda, ScrollTop/scrollLeft prensip olarak değiştirilebilir ve eleman kaydırılır.

Kimse sizi sayfayla aynı şeyi yapmaktan alıkoyamaz. Chrome/Safari/Opera dışındaki tüm tarayıcılarda document.documentElement.scrollTop ayarını yaparak kaydırma yapabilirsiniz ve bu tarayıcılarda bunun için document.body.scrollTop komutunu kullanmalısınız. Ve her şey harika çalışacak.

Ancak başka bir evrensel çözüm daha var - özel sayfa kaydırma yöntemleri window.scrollBy(x,y) ve window.scrollTo(pageX,pageY).

• ScrollBy(x,y) yöntemi sayfayı mevcut koordinatlarına göre kaydırır.
• ScrollTo(pageX,pageY) yöntemi, sayfayı belgenin tamamına göre belirtilen koordinatlara kaydırır. ScrollLeft/scrollTop özelliklerinin ayarlanmasına eşdeğer olacaktır. Belgenin başına kaydırmak için koordinatları (0,0) belirtmeniz yeterlidir.

görünüme geç

elem.scrollIntoView(top) yönteminin öğe üzerinde çağrılması gerekir ve sayfayı kaydırarak öğenin top doğruysa üstte, top yanlışsa altta olmasını sağlar. Üstelik bu üst parametre belirtilmezse true değerine eşit olacaktır.

Kaydırma önleyici

Bir belgeyi "kaydırılamaz" hale getirmenin gerekli olduğu durumlar vardır. Örneğin, bir belgenin üzerinde büyük bir iletişim kutusunun gösterilmesi, böylece ziyaretçinin iletişim kutusunda gezinebilmesi ancak belgenin kendisini kaydırması mümkün değildir.

Sayfanın kaydırılmasını önlemek için document.body.style.overflow = “gizli” özelliğini ayarlamanız yeterlidir.

document.body yerine kaydırmanın devre dışı bırakılması gereken herhangi bir öğe olabilir.

Ancak bu yöntemin dezavantajı kaydırma çubuğunun kendisinin kaybolmasıdır. Belirli bir genişliği kaplıyorsa, şimdi bu genişlik serbest bırakılacak ve sayfanın içeriği genişletilecek, metin "atlayacak" ve tüm boş alanı kaplayacaktır.

Sonuçlar

• Pencerenin görünür kısmının boyutlarını almak için şu özelliği kullanın: document.documentElement.clientWidth/Height
• Kaydırmayı hesaba katarak sayfa boyutlarını elde etmek için şunu kullanın: var ScrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document. documentElement .clientHeight);

Bu derste, tarayıcı penceresinin çalışma alanının boyutlarını (innerWidth ve innerHeight), pencerenin kendisinin boyutlarını (outerWidth ve OuterHeight), alabileceğiniz pencere nesnesinin özelliklerine bakacağız. Kullanıcı ekranının sol üst köşesine göre konumu (screenLeft ve screenTop) ve kaydırma konumları (pageXOffset ve pageYOffset).

innerWidth ve innerHeight özellikleri

Tarayıcı penceresinin görünür çalışma alanının boyutlarını elde etmek için tasarlanmıştır. Onlar. innerWidth ve innerHeight özelliklerinin amacı, HTML belgesinin görüntülendiği alanın genişliğini ve yüksekliğini elde etmektir. Bu özellikler salt okunurdur ve piksel değerlerini döndürür.

Örneğin, tarayıcı penceresinin görünür çalışma alanının yüksekliğini ve genişliğini alın:

Görünür görüntüleme alanının genişliği (widthContenArea):

Görünür görüntüleme alanının genişliği (heightContenArea):

// görünür görünüm alanının genişliği (hariç tüm tarayıcılar için) İnternet Explorer 8) var widthContenArea = window.innerWidth; // görünür görünüm alanının yüksekliği (Internet Explorer 8 dışındaki tüm tarayıcılar için) var heightContenArea = window.innerHeight; // görünür görünüm alanının genişliği (Internet Explorer 8 için) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // görünür görünüm alanının yüksekliği (Internet Explorer 8 için) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // görünür görünümün genişliği (tüm tarayıcılar için) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // görünür görünüm alanının yüksekliği (tüm tarayıcılar için) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea;

OuterWidth ve OuterHeight özellikleri

Tüm tarayıcı penceresinin boyutlarını elde etmek için tasarlanmıştır; araç çubukları, kaydırma çubukları, durum çubuğu, pencere kenarlıkları vb. dahil. OuterWidth ve OuterHeight özellikleri salt okunurdur ve sırasıyla 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 alın:

Tarayıcı penceresi genişliği (widthWindow):

Tarayıcı penceresi yüksekliği (heighWindow):

// tarayıcı penceresi genişliği var widthWindow = window.outerWidth; // tarayıcı penceresi yüksekliği var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow;

screenLeft (screenX) ve screenTop (screenY) özellikleri

Kullanıcı ekranının sol üst köşesine göre tarayıcı penceresinin veya belgenin sol üst köşesinin koordinatlarını elde etmek için tasarlanmıştır.

Bu durumda, screenLeft ve screenTop özellikleri Internet Explorer'da, screenX ve screenY özellikleri ise Mozilia Firefox'ta çalışır. Chrome, Safari ve diğer benzer tarayıcılarda hem screenLeft hem de screenTop özelliklerinin yanı sıra screenX ve screenY özelliklerini de kullanabilirsiniz.

Bu özellikleri kullanırken, bazı tarayıcıların belgenin sol üst köşesinin koordinatını döndürebildiğini, bazı tarayıcıların ise pencerenin sol üst köşesinin koordinatını döndürebildiğini dikkate almalısınız. screenleft (screenX) ve screenTop (screenY) özellikleri salt okunurdur ve ekranın sol köşesine göre yatay ve dikey mesafeleri sırasıyla piksel cinsinden döndürür.

Örneğin, geçerli tarayıcı penceresinin (belge) sol köşesinin x ve y koordinatlarını ekranın sol üst köşesine göre bir mesaj biçiminde görüntüleyelim:

function windowXY() ( // screenleft ve screenTop özelliklerini kullanarak pencerenin (belge) konumunun koordinatlarını alıyoruz var winX = window.screenLeft; var winY = window.screenTop; // screenX ve screenY özelliklerini kullanarak şunu elde ediyoruz pencere (belge) konumunun koordinatları winX = window.screenX; winY = window.screenY; // Tüm tarayıcılardaki pencere (belge) konumunun koordinatlarını alın winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Pencerenin kullanıcının ekranına göre koordinatları: X = " + winX + ", Y = " + winY + "."); ) koordinatlar

özellikler pageXOffset (scrollX) ve pageYOffset (scrollX)

Belgenin pencerenin sol üst köşesine göre yatay (sayfaXOffset) veya dikey (pageYOffset) yönde kaydırıldığı piksel sayısını elde etmek için tasarlanmıştır. ScrollX ve ScrollY özellikleri sırasıyla pageXOffset ve pageYOffset özelliklerine eşdeğerdir. Bu özellikler salt okunurdur.

Örneğin, belgenin yatay (sayfaXOffset) ve dikey (sayfaYOffset) yönlerde kaydırıldığı piksel sayısını bir mesajda görüntüleyin.

function ScrollContent() ( //Geçerli belgeyi 200 piksel sağa ve aşağı kaydırın window.scrollBy(200,200); //pageXOffset ve pageYOffset özelliklerini kullanarak değerleri alın var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Internet Explorer için belgenin yatay veya dikey olarak kaydırıldığı değerleri alın: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //Tüm tarayıcılar için: winOffsetX = window.pageXOffset || document .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; warning ("Belgenin yatay ve dikey olarak kaydırıldığı piksel sayısı: X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Kaydırma çubuklarının konumlarını bulun