Dalam pelajaran ini, kami menganggap sifat-sifat objek jendela, yang dengannya Anda bisa mendapatkan ukuran area kerja dari jendela browser (innerwidth dan inerveight), ukuran jendela itu sendiri (outerwidth dan outerheight), lokasinya relatif terhadap sudut kiri atas layar pengguna (screenleft dan screenont) dan posisi gulir (pagexffset dan pagetyoffset).
Sifat innerwidth dan innerheight
Mereka dirancang untuk mendapatkan ukuran jendela Workspace yang terlihat dari browser. Itu. Properti innerwidth dan inerveight dirancang untuk mendapatkan lebar dan tinggi area di mana dokumen HTML ditampilkan. Properti ini hanya dibaca dan mengembalikan nilai dalam piksel.
Misalnya, dapatkan tinggi dan lebar jendela ruang kerja yang terlihat dari browser:
Lebar viewport yang terlihat (WidthContenarea):
Lebar viewport yang terlihat (heightcontenarea):
Properti Outerwidth dan OuterHeight
Mereka dirancang untuk mendapatkan ukuran seluruh jendela browser, I.E. Termasuk bilah alat, bilah gulir, bilah status, batas jendela, dll. Outerwidth dan sifat OuterHeight hanya membaca dan mengembalikan lebar dan tinggi jendela dalam piksel.
Misalnya, dapatkan tinggi dan lebar jendela browser:
Browser Windows Width (WidthWindow):
Tinggi jendela browser (HeighWindow):
Properti ScreenLeft (ScreenX) dan Screenont (Screeny)
Mereka dimaksudkan untuk mendapatkan koordinat sudut kiri atas jendela peramban atau dokumen di sudut kiri atas layar pengguna.
Dalam hal ini, properti ScreenleFT dan Screense berfungsi di Internet Explorer, dan properti ScreenX dan Screeny di Mozilia Firefox. Di Chrome, browser safari, dan browser serupa lainnya dapat digunakan kedua properti ScreenleFT dan Screenont dan ScreenX dan Screeny Properties.
Saat menggunakan properti-properti ini, perlu untuk memperhitungkan fakta bahwa beberapa browser dapat mengembalikan koordinat sudut kiri atas dokumen, dan beberapa browser mengoordinasikan sudut kiri atas jendela. Screenleft Properties (ScreenX) dan Screenont (Screeny) hanya baca dan mengembalikan nilai jarak relatif ke sudut kiri secara horizontal dan vertikal dalam piksel.
Misalnya, tarik pesan koordinat X dan di sudut kiri jendela browser saat ini (dokumen) relatif terhadap sudut kiri atas layar:
Cari tahu koordinat
PagexOffset Properties (Scrollx) dan PagnetyOffset (Scrollx)
Mereka dimaksudkan untuk mendapatkan sejumlah piksel di mana dokumen tersebut digulir dalam arah horizontal (pageneffset) atau vertikal (pagetyoffset) dari sudut kiri atas relatif jendela. Properti Scrollx dan gulir adalah setara sesuai dengan sifat-sifat PageXOffSet dan PagnetyOffset. Properti ini hanya dibaca.
Misalnya, untuk menampilkan jumlah piksel tempat dokumen tersebut digulir dalam arah horizontal (pagexoffset) dan vertikal (pagetyoffset).
Pelajari posisi bilah gulir
Halo! Dalam melanjutkan topik dalam pelajaran ini, kami akan mempertimbangkan pertanyaan seperti itu sebagai halaman web yang menggulir dan memanipulasi ukuran browser. Bagaimana saya bisa menemukan lebar browser? Bagaimana cara menggulir halaman Web JavaScript? Jawaban untuk pertanyaan-pertanyaan ini saya pikir Anda akan menemukan dalam pelajaran ini.
Lebar / Tinggi bagian yang terlihat dari jendela browser
Properti klien / tinggi untuk elemen hanyalah lebar / ketinggian area jendela yang terlihat.
Bukan window.innerwidth / tinggi
Perlu dicatat bahwa semua browser, kecuali IE8, juga dapat mendukung sifat-sifat window.innerwidth / inerveight. Mereka menghemat ukuran jendela saat ini.
Apa bedanya? Anda bertanya. Ini tentu kecil, tetapi sangat penting.
Properti ClientWidth / Tinggi, Jika ada bilah gulir, kembalikan lebar / tinggi di dalamnya, dapat diakses ke seluruh dokumen, dan window.innerwidth / tinggi - akan mengabaikan kehadirannya.
Jika sisi kanan halaman mengambil bilah gulir, maka garis-garis ini akan menghapus berbeda:
Peringatan (window.innerwidth); // semua lebar jendela waspada penuh (dokumen.documentelement.clientwidth); // lebar lebih sedikit gulir
Biasanya kami hanya tertarik pada lebar jendela yang tersedia, misalnya, untuk menggambar sesuatu, yaitu, minus bilah gulir. Oleh karena itu, documentElement.clientwidth sering digunakan.
Lebar / ketinggian halaman web dengan mempertimbangkan gulir akun
Ya, secara teoritis, bagian yang terlihat dari halaman adalah dokumen. Klien / tinggi, tetapi ukuran penuh mempertimbangkan bilah gulir adalah dengan analogi, dokumentasi. Scrollwidth / Scrollheight.
Ini berlaku untuk semua barang biasa.
Tetapi untuk halaman dengan properti ini, mungkin ada masalah ketika gulir ada di sana, maka tidak. Dalam hal ini, mereka bekerja dengan tidak benar. Saya harus mengatakan bahwa di browser Chrome / Safari dan Opera, dengan tidak adanya bilah gulir, nilai dokumen. ScrollHeight dalam hal ini bahkan mungkin kurang dari dokumen
Masalah ini dapat terjadi secara khusus untuk dokumen.
Tetapi dimungkinkan untuk secara andal menentukan ukuran halaman, dengan mempertimbangkan gulir, cukup mengambil maksimum beberapa properti ini:
Var scrollvisota \u003d math.max (document.body.scrollvisota, dokumen.documentelement.scrollheight, document.body.offsetvisota, documentelement.offsetheight, dokumen Peringatan ("tinggi, dengan mempertimbangkan gulir akun:" + Scrollvisota);
Memperoleh gulir saat ini
Jika elemen konvensional memiliki gulir saat ini dalam scrollleft / scrolltop.
Bagaimana dengan halaman itu?
Faktanya adalah bahwa sebagian besar browser akan memproses dengan benar dokumen. Konsrolllell / TOP Query, namun, Safari / Chrome / Opera memiliki kesalahan karena Anda harus menggunakan dokumen.
Nah, untuk sepenuhnya mem-bypass masalah ini, Anda dapat menggunakan properti window.pagexOffset / PagnetyOffset:
Peringatan ("gulir saat ini dari atas:" + window.pageyOffset); Peringatan ("gulir saat ini di sebelah kiri:" + window.pagexoffset);
Semua properti ini:
- IE8 tidak didukung.
- Mereka hanya dapat membacanya, tetapi tidak mungkin untuk berubah.
Jika IE8 tidak khawatir, maka kita cukup menggunakan properti ini.
Versi cross-browser dengan IE8 menyediakan opsi pada dokumen:
Var scrollltop \u003d window.pageyOffset || dokumen.documentelement.scrolltop; Peringatan ("gulir saat ini:" + scrolltop);
Gulir Mengubah Halaman: Scrollto, Scrollby, Scrollintoview
Untuk menggulir halaman menggunakan JavaScript, semuanya elemen harus dimuat sepenuhnya.
Pada elemen-elemen biasa dari scrolltop / scrollleft, pada prinsipnya, Anda dapat berubah, dan pada saat yang sama item akan bergulir.
Tidak ada yang mengganggu Anda dengan cara yang sama dan dengan halaman. Di semua browser, selain Chrome / Safari / Opera, Anda dapat menggulir dengan dokumen instalasi sederhana.documentelement.scrolltop, dan dalam yang ditentukan - Anda harus menggunakan Document.Scrolltop untuk ini. Dan semuanya akan bekerja dengan sempurna.
Tetapi ada satu lagi, solusi universal - metode gulir khusus dari halaman halaman.Scrollby (x, y) dan window.scrollto (PagEC, Paget).
- Metode Scrollby (X, Y) akan menggulir ke koordinat saat ini.
- Metode scrollto (pagex, pagench) gulir halaman ke koordinat yang ditentukan relatif terhadap seluruh dokumen. Ini akan setara dengan memasang properti scrolllelft / scrolltop. Untuk menggulir ke awal dokumen, Anda dapat menentukan koordinat (0,0).
scrollindoView.
Metode Elem.ScrollLintoWiew (atas) harus dipanggil pada elemen dan menggulir halaman sehingga elemennya naik ke atas, jika parameter atas benar, dan di bagian bawah, jika bagian atas sama dengan FALSE. Apalagi jika parameter teratas ini tidak ditentukan, itu akan sama dengan benar.
DOHIBISI Gulir
Ada situasi ketika perlu membuat dokumen "Non-hancur". Misalnya, ketika kotak dialog besar ditampilkan di atas dokumen, sehingga pengunjung dapat menggulir ke jendela ini, tetapi bukan dokumen itu sendiri.
Untuk melarang pengguliran halaman, itu cukup untuk mengirimkan dokumen.body.style.Overflow \u003d "Tersembunyi" Properti.
Alih-alih mendokumentasikan.Body, mungkin ada elemen yang gulirnya harus dilarang.
Tetapi kerugian dari metode ini adalah bahwa bilah gulir itu sendiri menghilang sendiri. Jika dia menduduki beberapa lebar, maka sekarang lebar ini dibebaskan, dan isi halaman akan diperluas, teks "melompat", mengambil semuanya tempat kosong.
HASIL
- Untuk mendapatkan ukuran bagian yang terlihat dari jendela, menggunakan properti: Document.DocumentElement.clientwidth / tinggi
- Untuk memperhitungkan ukuran bilah gulir harus digunakan: var scrollheight \u003d math.max (document.body.scrollheight, document.bollheight.scrollheight.body.offsetheight, documentsetheight , dokumen.documentelement .ClientHeight);
Ketika mengembangkan antarmuka untuk situs sering Anda harus menggunakan Javascript. Tentu saja itu buruk, tetapi dalam beberapa situasi tidak mungkin untuk mengimplementasikan semuanya sepenuhnya pada CSS.
Kebutuhan paling tawanan bagi saya untuk menentukan lebar atau tinggi jendela browser untuk manipulasi lebih lanjut. Di bawah Potong semua informasi tentang topik ini.
Di mana itu bisa berguna?
Saya tidak akan berbicara untuk semua orang, tetapi terkesan bagi saya dalam integrasi dengan TextPattern` dengan semua jenis galeri, slider, dll., Di mana semuanya ditulis pada JS murni. Hal-hal yang terikat erat dengan JS jarang terjadi, tetapi masih bertemu, jadi catatan ini muncul.
Anda dapat mendefinisikan 2 cara: js atau jquery.
Penentuan lebar atau tinggi menggunakan JS murni
Ini adalah cara yang paling disukai, karena mesin JavaScript memiliki hampir setiap browser modern. Bahkan browser seluler belajar bekerja dengan JS.
Tentu saja, ada kemungkinan bahwa pengguna ditangani untuk mematikan pemrosesan JS di browser, tetapi menurut saya, "orang-orang aneh" seperti itu tidak begitu banyak, karena hampir setiap situs menggunakan solusi yang berfungsi pada JS.
Di js untuk menentukan ukuran layarAnda perlu menggunakan fungsi:
Layar.width // layar lebar layar. Tingginya // ketinggian layar
Ini adalah contoh yang tidak berarti dari penggunaan:
Jika Anda menggunakannya untuk memposisikan beberapa item pada halaman, maka solusi terbaik akan digunakan bukan ukuran layar, tetapi ukuran jendela browser. Di JS itu dilakukan seperti ini:
Document.body.clientwidth // browser Lebar Dokumen
Dengan demikian, berikut adalah contoh yang tidak berarti dari penggunaan:
Definisi ukuran browser menggunakan jQuery
Secara pribadi, saya menggunakan metode yang dijelaskan di bawah ini. Metode ini hanya berfungsi jika sebelumnya Anda telah menghubungkan Perpustakaan JQuery di situs. Di semua situs yang harus saya lakukan pustaka ini adalah standar de / infact.
Untuk digunakan untuk tugas jQuery kami, Anda harus menggunakan kode:
$ (Jendela) .width (); // peramban lebar $ (jendela). THEIGHT (); // Tinggi browser
Dan pada akhirnya saya ingin mengatakan bahwa jika mungkin dilakukan tanpa JS dan jQuery secara umum atau sebagian, maka perlu untuk bertindak.
Untuk mengetahui secara sosial. Jaringan
Untuk apa? Misalnya, kami memiliki tata letak situs yang indah, yang semua pameran kecantikan hanya ketika menyelesaikan, mengatakan, 1600 per 1200. Misalnya, ia memiliki topi indah yang sangat besar. Apa yang akan terjadi jika seseorang pergi ke situs pada resolusi 1024 menjadi 768? Ya, hanya topi yang akan terlihat. Tidak baik? Mungkin. Lalu mengapa tidak membuat hal seperti itu ketika ketinggian / layar browser, topi hanya akan terputus, dan pergi ke menu dan sisa situs? Di, apa yang dibutuhkan.
Sebenarnya, saya menggambarkan salah satu contoh yang saya temui dalam praktik (lihat CartiGintka). Memecahkan masalah hanya - melalui javascript. Dan mungkin melalui jquery, saya tidak ingat. Saya akan menjelaskan kedua metode di sini.
Pertama-tama perlu untuk membedakan definisi " resolusi layar"Dan" ukuran jendela browser"(Karena dalam beberapa artikel ada insiden - memuji metode, mereka ditawari orang lain, meskipun dalam satu kasus saya mengukur resolusi browser, di sisi lain - resolusi monitor).
Perlu untuk menentukan sejak awal bahwa itu lebih penting bagi Anda. Dalam hal ini contoh dengan topi, saya fokus pada resolusi layar (monitor): semua sama, situs ini indah jika jendela browser berkurang secara manual, maka biarkan browser mulai ketika melihat situs ini (tidak ada apa-apa makan kira-kira.). Tetapi, misalnya, untuk menyesuaikan gambar yang diperluas dari galeri Lightbox jQuery, saya menggunakan lebar dan tinggi browser.
Dan setelah Anda memilih, tulis kode, Anda bisa di header situs. Pertama, contoh yang berorientasi pada resolusi layar.
3-6 baris - JavaScript murni, 7-11 baris - contoh pada jQuery. Metode JavaScript digunakan untuk menentukan lebar dan tinggi. Lebar dan layar. Metode ini. Baris apa yang dilakukan, jelas: Skrip pertama meresepkan jalur ke file CSS opsional, dan yang lainnya - untuk blok pengidentifikasi total, properti CSS "Latar Belakang-Position" berada.
Kami melihat contoh kedua, tetapi yang akan fokus pada resolusi browser. Semua sama, metode telah berubah.
Jadi, dari dua contoh, ikhtisar singkat - apa yang harus digunakan untuk apa:
- layar.width.. Mendefinisikan lebar layar (monitor).
- layar. Meiight.. Menentukan ketinggian layar (monitor).
- dokumen.body.clientwidth.. Menentukan lebar browser.
- document.body.clientheight.. Menentukan ketinggian browser.
- $ (Jendela) .width (). Menentukan lebar browser, tetapi hanya jika Anda memiliki jQuery.
- $ (Jendela). Entah (). Menentukan ketinggian browser, tetapi hanya jika Anda memiliki jQuery.
Jelas bahwa jika Anda menggunakan jQuery, lebih disukai 5 opsi dari 3, dan 6 daripada 4 - mereka lebih pendek. Nah, dan sebagainya - rasa dan warnanya.
Sedangkan untuk rekaman tinggi dan lebar layar spesifik untuk jQuery - maka, sebenarnya, saya tidak mengenal mereka. Secara teori, desain jenis 5-6 baris harus, tetapi entah bagaimana itu tidak menemukan latihan, saya memberi saya, mereka tidak. Ya, dan tidak perlu, screen.width adalah desain yang cukup pendek, itu sudah cukup.
Ya, masih ada $ (dokumen) .width () - menentukan lebar dokumen HTML. Gunakan dalam praktik - entah bagaimana meragukan. Siapa tahu - Saya akan senang jika Anda berbagi.
Hari ini semuanya! Pertahankan hingga akhir pekan dan terus-menerus pergi ke kebab! (Kecuali jika Anda sakit dengan sesuatu seperti beberapa - kira-kira.). Semoga berhasil!
